{% set header_title = 'Action Games' %}
{% set background_top = 'assets/images/bg-top-4.png' %}
{% set breadcrumbs = [
    '<a href="index.html">Home</a>',
    '<a href="store.html">Store</a>',
    '<span>Action Games</span>'
] %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
<div class="container">

    <!-- START: Image Slider -->
    <div class="nk-image-slider" data-autoplay="8000">
        {% set top_slider = [
        {
        'img': 'assets/images/slide-1.jpg',
        'thumb': 'assets/images/slide-1-thumb.jpg',
        'content': '
        <h3 class="h4">As we Passed, I remarked</h3>
        <p class="text-white">As we passed, I remarked a beautiful church-spire rising above some old elms in the park; and before them, in the midst of a lawn, chimneys covered with ivy, and the windows shining in the sun.</p>
        <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-white nk-btn-hover-color-main-1">Read More</a>
        '
        }, {
        'img': 'assets/images/slide-2.jpg',
        'thumb': 'assets/images/slide-2-thumb.jpg',
        'content': '
        <h3 class="h4">He made his passenger captain of one</h3>
        <p class="text-white">Now the races of these two have been for some ages utterly extinct, and besides to discourse any further of them would not be at all to my purpose. But the concern I have most at heart is for our Corporation of Poets, from whom I am preparing a petition to your Highness,  to be subscribed with the names of one...</p>
        <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-white nk-btn-hover-color-main-1">Read More</a>
        '
        }, {
        'img': 'assets/images/slide-3.jpg',
        'thumb': 'assets/images/slide-3-thumb.jpg'
        }, {
        'img': 'assets/images/slide-4.jpg',
        'thumb': 'assets/images/slide-4-thumb.jpg',
        'content': '
        <h3 class="h4">At length one of them called out in a clear</h3>
        <p class="text-white">TJust then her head struck against the roof of the hall: in fact she was now more than nine feet high...</p>
        <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-white nk-btn-hover-color-main-1">Read More</a>
        '
        }, {
        'img': 'assets/images/slide-5.jpg',
        'thumb': 'assets/images/slide-5-thumb.jpg',
        'content': '
        <h3 class="h4">For good, too though, in consequence</h3>
        <p class="text-white">She gave my mother such a turn, that I have always been convinced I am indebted to Miss Betsey for having been born on a Friday. The word was appropriate to the moment.</p>
        <p class="text-white">My mother was so much worse that Peggotty, coming in with the teaboard and candles, and seeing at a glance how ill she was, - as Miss Betsey might have done sooner if there had been light enough, - conveyed her upstairs to her own room with all speed; and immediately dispatched Ham Peggotty, her nephew, who had been for some days past secreted in the house...</p>
        <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-white nk-btn-hover-color-main-1">Read More</a>
        '
        }
        ] %}
        {% for item in top_slider %}
        <div class="nk-image-slider-item">
            <img src="{{ item.img }}" alt="" class="nk-image-slider-img" data-thumb="{{ item.thumb }}">
            {% if item.content %}
            <div class="nk-image-slider-content">
                {{ item.content | safe }}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    <!-- END: Image Slider -->

    <!-- START: Categories -->
    <div class="nk-gap-2"></div>
    <div class="row vertical-gap">
        <div class="col-lg-4">
            <div class="nk-feature-1">
                <div class="nk-feature-icon">
                    <img src="assets/images/icon-mouse.png" alt="">
                </div>
                <div class="nk-feature-cont">
                    <h3 class="nk-feature-title"><a href="#">PC</a></h3>
                    <h3 class="nk-feature-title text-main-1"><a href="#">View Games</a></h3>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="nk-feature-1">
                <div class="nk-feature-icon">
                    <img src="assets/images/icon-gamepad.png" alt="">
                </div>
                <div class="nk-feature-cont">
                    <h3 class="nk-feature-title"><a href="#">PS4</a></h3>
                    <h3 class="nk-feature-title text-main-1"><a href="#">View Games</a></h3>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="nk-feature-1">
                <div class="nk-feature-icon">
                    <img src="assets/images/icon-gamepad-2.png" alt="">
                </div>
                <div class="nk-feature-cont">
                    <h3 class="nk-feature-title"><a href="#">Xbox</a></h3>
                    <h3 class="nk-feature-title text-main-1"><a href="#">View Games</a></h3>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Categories -->

    <div class="nk-gap-2"></div>
    <div class="row vertical-gap">
        <div class="col-lg-8">
            <!-- START: Products -->
            <div class="row vertical-gap">
                {% for product in shop %}
                <div class="col-md-6">
                    <div class="nk-product-cat">
                        <a class="nk-product-image" href="{{ product.url }}">
                            <img src="{{ product.photos[0].xs }}" alt="{{ product.title }}">
                        </a>
                        <div class="nk-product-cont">
                            <h3 class="nk-product-title h5"><a href="{{ product.url }}">{{ product.title }}</a></h3>
                            <div class="nk-gap-1"></div>
                            {{ product.rating | safe }}
                            <div class="nk-gap-1"></div>
                            <div class="nk-product-price">{{ product.price }}</div>
                            <div class="nk-gap-1"></div>
                            <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-dark-3 nk-btn-hover-color-main-1">Add to Cart</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <!-- END: Products -->

            <!-- START: Pagination -->
            <div class="nk-gap-3"></div>
            <div class="nk-pagination nk-pagination-center">
                <a href="#" class="nk-pagination-prev">
                    <span class="ion-ios-arrow-back"></span>
                </a>
                <nav>
                    <a class="nk-pagination-current" href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <span>...</span>
                    <a href="#">14</a>
                </nav>
                <a href="#" class="nk-pagination-next">
                    <span class="ion-ios-arrow-forward"></span>
                </a>
            </div>
            <!-- END: Pagination -->
        </div>
        <div class="col-lg-4">
            <!--
                START: Sidebar

                Additional Classes:
                    .nk-sidebar-left
                    .nk-sidebar-right
                    .nk-sidebar-sticky
            -->
            <aside class="nk-sidebar nk-sidebar-right nk-sidebar-sticky">
                {% include "shared/sidebar-store.html" %}
            </aside>
            <!-- END: Sidebar -->
        </div>
    </div>
</div>

<div class="nk-gap-2"></div>
{% endblock %}