{% set page_title = 'Minimal Fullscreen Slider - Blog' %}
{% extends 'layouts/layout-minimal-fullscreen.html' %}

{% block content %}

<div class="nk-gap-4"></div>
<div class="container">
    <div class="row">
        <div class="col-lg-8 offset-lg-2">
            <!-- START: Filter -->
            <div class="nk-pagination nk-pagination-nobg nk-pagination-center">
                <a href="#nk-toggle-filter"><span class="nk-icon-squares"></span></a>
            </div>
            <ul class="nk-isotope-filter">
                <li class="active" data-filter="*">All</li>
                <li data-filter="Nature">Nature</li>
                <li data-filter="Cities">Cities</li>
                <li data-filter="Branding">Branding</li>
                <li data-filter="Design">Design</li>
            </ul>
            <!-- END: Filter -->

            <!-- START: Posts List -->
            <div class="nk-blog-isotope nk-isotope nk-isotope-gap nk-isotope-1-cols">

                {% for post in posts %}
                <!-- START: Post -->
                <div class="nk-isotope-item" data-filter="{{ post.cat_text }}">
                    <div class="nk-blog-post">
                        <div class="nk-post-thumb">
                            <a href="demo-minimal-fullscreen-blog-single.html">
                                <img src="{{ post.thumb_lg }}" alt="" class="nk-img-stretch">
                            </a>
                            <div class="nk-post-category">{{ post.cat | safe}}</div>
                        </div>
                        <h2 class="nk-post-title h4"><a href="demo-minimal-fullscreen-blog-single.html">{{ post.title }}</a></h2>

                        <div class="nk-post-date">
                            {{ post.date }}
                        </div>

                        <div class="nk-post-text">
                            {{ post.excerpt | safe }}
                        </div>
                    </div>
                </div>
                <!-- END: Post -->
                {% endfor %}

            </div>
            <!-- END: Posts List -->
        </div>
    </div>

    <div class="nk-gap-4"></div>

</div>

<!-- START: Pagination -->
<div class="nk-pagination nk-pagination-center">
    <a href="#">Load More Posts</a>
</div>
<!-- END: Pagination -->
{% endblock %}