{% set page_title = 'Creative Agency - Portfolio' %}
{% extends 'layouts/layout-creative-agency.html' %}

{% block content %}
    <!-- 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-isotope nk-isotope-3-cols">
        {% set items = [
            {
                thumb: 'assets/images/demo-creative-agency-work-1.jpg',
                title: 'Various Illustrations',
                filter: 'Branding',
                color: '#69b88b',
                url: 'demo-creative-agency-work-single-1.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-2.jpg',
                title: 'Creative Shapes',
                filter: 'Branding',
                color: '#962444',
                url: 'demo-creative-agency-work-single-2.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-3.jpg',
                title: 'Raympnd Coller',
                filter: 'Print',
                color: '#fa7f21',
                url: 'demo-creative-agency-work-single-3.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-4.jpg',
                title: 'Allen Carter',
                filter: 'Photography',
                color: '2a54e0',
                url: 'demo-creative-agency-work-single-1.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-5.jpg',
                title: 'Album Cover',
                filter: 'Design',
                color: '#251a5d',
                url: 'demo-creative-agency-work-single-2.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-6.jpg',
                title: 'Creative Portrait',
                filter: 'Print',
                color: '#e47d87',
                url: 'demo-creative-agency-work-single-3.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-7.jpg',
                title: 'In the Night',
                filter: 'Design',
                color: '#882fa8',
                url: 'demo-creative-agency-work-single-1.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-8.jpg',
                title: 'Paper Mockup',
                filter: 'Design',
                color: '#cc325e',
                url: 'demo-creative-agency-work-single-2.html'
            }, {
                thumb: 'assets/images/demo-creative-agency-work-9.jpg',
                title: 'Shapes Illustration',
                filter: 'Mockup',
                color: '#291eff',
                url: 'demo-creative-agency-work-single-3.html'
            }
        ] %}
        {% for item in items %}
            <div class="nk-isotope-item" data-filter="{{ item.filter }}">
                <div class="nk-portfolio-item nk-portfolio-item-square nk-portfolio-item-info-style-1">
                    <a href="{{ item.url }}" class="nk-portfolio-item-link"></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" style="background-color: {{ item.color }}">
                        <div>
                            <h2 class="nk-portfolio-item-title h3">{{ item.title }}</h2>
                            <div class="nk-portfolio-item-letter display-extra-big">{{ item.title[0] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

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

{% endblock %}