{% set header_title = 'Portfolio 4 Columns Metro 2' %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
<div class="container-fluid">
    <!-- 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 -->

    <div class="nk-portfolio-list nk-popup-gallery">
        <div class="nk-isotope nk-isotope-4-cols">
            {% for i in [0, 1, 2] %}
            {% set item = portfolio[i] %}
            {% set item_h = 'nk-portfolio-item-square' %}
            {% if i == 1 or i == 2 %}{% set item_h = 'nk-portfolio-item-xs' %}{% endif %}

            <div class="nk-isotope-item{{ ' nk-isotope-item-x2' if i == 0 or i == 1 or i == 2 or i == 5 }}" data-filter="{{ item.category }}">
                <div class="nk-portfolio-item nk-portfolio-item-info-style-1 {{ item_h }}">
                    <a href="{{ item.thumb }}" class="nk-portfolio-item-link nk-gallery-item" data-size="{{ item.thumb_size }}"></a>
                    <div class="nk-portfolio-item-image"><div style="background-image: url('{{ item.thumb }}');"></div></div>
                    <div class="nk-portfolio-item-info nk-portfolio-item-info-center text-center">
                        <div>
                            <div class="nk-portfolio-item-icon"><span class="pe-7s-look"></span></div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="nk-isotope nk-isotope-4-cols">
            {% for i in [3, 4, 5] %}
            {% set item = portfolio[i] %}
            {% set item_h = 'nk-portfolio-item-square' %}
            {% if i == 3 or i == 4 %}{% set item_h = 'nk-portfolio-item-xl' %}{% endif %}

            <div class="nk-isotope-item{{ ' nk-isotope-item-x2' if i == 0 or i == 1 or i == 2 or i == 5 }}" data-filter="{{ item.category }}">
                <div class="nk-portfolio-item nk-portfolio-item-info-style-1 {{ item_h }}">
                    <a href="{{ item.thumb }}" class="nk-portfolio-item-link nk-gallery-item" data-size="{{ item.thumb_size }}"></a>
                    <div class="nk-portfolio-item-image" style="background-image: url('{{ item.thumb }}');"></div>
                    <div class="nk-portfolio-item-info nk-portfolio-item-info-center text-center">
                        <div>
                            <div class="nk-portfolio-item-icon"><span class="pe-7s-look"></span></div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

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