{% set header_title = 'Store' %}
{% set background_top = 'assets/images/bg-top-4.png' %}
{% set breadcrumbs = [
    '<a href="index.html">Home</a>',
    '<span>Store</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: Some Products -->
    <div class="nk-gap-2"></div>
    <div class="row vertical-gap">
        <div class="col-md-6 col-lg-4">
            <div class="nk-gallery-item-box">
                <a href="{{ shop[3].url }}" class="nk-gallery-item">
                    <span class="nk-gallery-item-overlay"><span><span class="nk-icon-circles"></span></span></span>
                    <img src="{{ shop[3].photos[0].lg }}" alt="{{ shop[3].title }}">
                </a>
                <div class="nk-gallery-item-label">
                    <h4 class="mb-0">{{ shop[3].title }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 order-lg-3">
            <div class="nk-gallery-item-box">
                <a href="{{ shop[1].url }}" class="nk-gallery-item">
                    <span class="nk-gallery-item-overlay"><span><span class="nk-icon-circles"></span></span></span>
                    <img src="{{ shop[1].photos[0].lg }}" alt="{{ shop[1].title }}">
                </a>
                <div class="nk-gallery-item-label">
                    <h4 class="mb-0">{{ shop[1].title }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="row vertical-gap">
                <div class="col-md-6">
                    <div class="nk-gallery-item-box">
                        <a href="{{ shop[2].url }}" class="nk-gallery-item">
                            <span class="nk-gallery-item-overlay"><span><span class="nk-icon-circles"></span></span></span>
                            <img src="{{ shop[2].photos[0].lg }}" alt="{{ shop[2].title }}">
                        </a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-box">
                        <a href="{{ shop[0].url }}" class="nk-gallery-item">
                            <span class="nk-gallery-item-overlay"><span><span class="nk-icon-circles"></span></span></span>
                            <img src="{{ shop[0].photos[0].lg }}" alt="{{ shop[0].title }}">
                        </a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-box">
                        <a href="{{ shop[4].url }}" class="nk-gallery-item">
                            <span class="nk-gallery-item-overlay"><span><span class="nk-icon-circles"></span></span></span>
                            <img src="{{ shop[4].photos[0].lg }}" alt="{{ shop[4].title }}">
                        </a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-box">
                        <a href="{{ shop[5].url }}" class="nk-gallery-item">
                            <span class="nk-gallery-item-overlay"><span><span class="nk-icon-circles"></span></span></span>
                            <img src="{{ shop[5].photos[0].lg }}" alt="{{ shop[5].title }}">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Some Products -->

    <!-- START: Top 10 Best Sellers -->
    <div class="nk-gap-3"></div>
    <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Top 10</span> Best Sellers</span></h3>
    <div class="nk-gap"></div>
    <div class="nk-carousel nk-carousel-x4" data-autoplay="5000" data-dots="false" data-cell-align="left" data-arrows="true">
        <div class="nk-carousel-inner">
            {% for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] %}
            {% set product = shop[i] %}
            <div><div class="pl-5 pr-5">
                <div class="nk-product-cat-3">
                    <a class="nk-product-image" href="{{ product.url }}">
                        <img src="{{ product.photos[0].xs }}" alt="{{ product.title }}">
                    </a>
                    <div class="nk-product-cont">
                        <div class="nk-gap-1"></div>
                        <h3 class="nk-product-title h5"><a href="{{ product.url }}">{{ product.title }}</a></h3>
                        <div class="nk-gap-1"></div>
                        <div class="nk-product-price">{{ product.price }}</div>
                    </div>
                </div>
            </div></div>
            {% endfor %}
        </div>
    </div>
    <!-- END: Top 10 Best Sellers -->

    <!-- START: Featured Games -->
    <div class="nk-gap-3"></div>
    <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Featured</span> Games</span></h3>
    <div class="nk-gap"></div>
    <div class="row vertical-gap">
        {% for i in [6, 7, 8, 9] %}
        {% set product = shop[i] %}
        <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: Featured Games -->

    <!-- 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 %}