{% set page_title = 'Minimal Agency - Blog' %}
{% extends 'layouts/layout-minimal-agency.html' %}

{% block content %}

<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-wide nk-isotope nk-isotope-gap nk-isotope-1-cols">

                {% for i in [1, 2, 3, 4] %}
                {% set post = posts[i] %}
                <!-- 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-agency-blog-single.html">
                                <img src="{{ post.thumb_lg }}" alt="" class="nk-img-stretch">
                            </a>
                        </div>
                        <h2 class="nk-post-title"><a href="demo-minimal-agency-blog-single.html">{{ post.title }}</a></h2>

                        <div class="nk-post-meta">
                            <div class="nk-post-date">{{ post.date }}</div>
                            <div class="nk-post-category">{{ post.cat | safe}}</div>
                            <div class="nk-post-comments-count">2 Comments</div>
                        </div>

                        <div class="nk-post-text">
                            {{ post.excerpt | safe }}

                            <a href="demo-minimal-agency-blog-single.html" class="nk-btn nk-btn-md nk-btn-outline nk-btn-color-gray-7 nk-btn-hover-color-dark-3 text-dark">Read More</a>
                        </div>
                    </div>
                </div>
                <!-- END: Post -->
                {% endfor %}

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

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

        </div>
    </div>

</div>

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