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

{% block content %}

    <div class="container">
        <!-- 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="Branding">Branding</li>
            <li data-filter="Print">Print</li>
            <li data-filter="Photography">Photography</li>
            <li data-filter="Design">Design</li>
            <li data-filter="Mockup">Mockup</li>
        </ul>
        <!-- END: Filter -->

        <!-- START: Works -->
        <div class="nk-portfolio-list nk-isotope nk-isotope-2-cols nk-isotope-gap">
            {% set work_url = cycler('demo-minimal-agency-work-single-1.html', 'demo-minimal-agency-work-single-2.html') %}
            {% for i in [1, 2, 3, 4, 5, 6, 7, 8] %}
                {% set item = portfolio[i] %}
                <div class="nk-isotope-item" data-filter="{{ item.category }}">
                    <div class="nk-portfolio-item nk-portfolio-item-info-style-7">
                        <a href="{{ work_url.next() }}" class="nk-portfolio-item-link"></a>
                        <div class="nk-portfolio-item-image"><div style="background-image: url('{{ item.thumb_sm }}');"></div></div>
                        <div class="nk-portfolio-item-info">
                            <div>
                                <h2 class="nk-portfolio-item-title h3">{{ item.title }}</h2>
                                <div class="nk-portfolio-item-text">{{ item.excerpt }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <!-- END: Works -->

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

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

{% endblock %}