{% 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: Categories -->
    <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 -->

    <!-- START: Products Filter -->
    <div class="nk-gap-2"></div>
    <div class="row vertical-gap">
        <div class="col-lg-8">
            <div class="row vertical-gap">
                <div class="col-md-4">
                    <select class="form-control">
                        <option value="" disabled selected>Select Platform</option>
                        <option value="ps4">PS4</option>
                        <option value="xbox">Xbox 1</option>
                        <option value="pc">PC</option>
                    </select>
                </div>
                <div class="col-md-8">
                    <div class="nk-input-slider-inline">
                        <div class="nk-input-slider">
                            <div class="nk-input-slider-content text-white">
                                PRICE:
                                <strong class="text-main-1">€ <span class="nk-input-slider-value-0"></span></strong>
                                -
                                <strong class="text-main-1">€ <span class="nk-input-slider-value-1"></span></strong>
                            </div>
                            <div class="nk-input-slider-input">
                                <input
                                        type="text"
                                        name="price-filter"
                                        data-slider-min="0"
                                        data-slider-max="1800"
                                        data-slider-step="1"
                                        data-slider-value="[200, 1200]"
                                        data-slider-tooltip="hide"
                                >
                            </div>
                        </div>
                        <div>
                            <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-white">Apply</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <form action="#" class="nk-form" novalidate="novalidate">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Type something...">
                    <button class="nk-btn nk-btn-color-main-1"><span class="ion-search"></span></button>
                </div>
            </form>
        </div>
    </div>
    <!-- END: Products Filter -->

    <div class="nk-gap-2"></div>
    <!-- START: Products -->
    <div class="row vertical-gap">
        {% for product in shop %}
        <div class="col-lg-6">
            <div class="nk-product-cat-2">
                <a class="nk-product-image" href="{{ product.url }}">
                    <img src="{{ product.photos[0].md }}" 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>
                    {{ product.text }}
                    <div class="nk-gap-2"></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 -->

    <!-- START: Most Popular -->
    <div class="nk-gap-3"></div>
    <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Most</span> Popular</span></h3>
    <div class="nk-gap"></div>
    <div class="row vertical-gap">
        {% for i in [10, 11, 12, 13, 14, 15] %}
        {% set product = shop[i] %}
        <div class="col-lg-4 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>
            </div>
        </div>
        {% endfor %}
    </div>
    <!-- END: Most Popular -->
</div>

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