{% set header_title = 'Community and Store HTML Game Template' %}
{% extends 'layouts/layout-1.html' %}

{% macro tabs_news(first, next, category) %}
{% if first >= 0 %}
<div class="nk-blog-post nk-blog-post-border-bottom">
    <a href="{{ posts[first].url }}" class="nk-post-img">
        <img src="{{ posts[first].thumb_fw }}" alt="{{ posts[first].title }}">
        {% if category %}
        <span class="nk-post-categories">
            {{ category | safe }}
        </span>
        {% endif %}
    </a>
    <div class="nk-gap-1"></div>
    <h2 class="nk-post-title h4"><a href="{{ posts[first].url }}">{{ posts[first].title }}</a></h2>
    <div class="nk-post-date mt-10 mb-10">
        <span class="fa fa-calendar"></span> {{ posts[first].date }}
        <span class="fa fa-comments"></span> <a href="#">{{ posts[first].comments_count }} comments</a>
    </div>
    <div class="nk-post-text">
        {{ posts[first].excerpt | safe }}
    </div>
</div>
{% endif %}
{% if next %}
{% for next_item in next %}
<div class="nk-blog-post nk-blog-post-border-bottom">
    <div class="row vertical-gap">
        <div class="col-lg-3 col-md-5">
            <a href="{{ posts[next_item].url }}" class="nk-post-img">
                <img src="{{ posts[next_item].thumb_lg_square }}" alt="{{ posts[next_item].title }}">
                {% if category %}
                <span class="nk-post-categories">
                    {{ category | safe }}
                </span>
                {% endif %}
            </a>
        </div>
        <div class="col-lg-9 col-md-7">
            <h2 class="nk-post-title h4"><a href="{{ posts[next_item].url }}">{{ posts[next_item].title }}</a></h2>
            <div class="nk-post-date mt-10 mb-10">
                <span class="fa fa-calendar"></span> {{ posts[next_item].date }}
                <span class="fa fa-comments"></span> <a href="#">{{ posts[next_item].comments_count }} comments</a>
            </div>
            <div class="nk-post-text">
                {{ posts[next_item].excerpt | safe }}
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}
{% endmacro %}

{% 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>
                    <h4 class="nk-feature-title text-main-1"><a href="#">View Games</a></h4>
                </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>
                    <h4 class="nk-feature-title text-main-1"><a href="#">View Games</a></h4>
                </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>
                    <h4 class="nk-feature-title text-main-1"><a href="#">View Games</a></h4>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Categories -->

    <!-- START: Latest News -->
    <div class="nk-gap-2"></div>
    <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Latest</span> News</span></h3>
    <div class="nk-gap"></div>

    <div class="nk-news-box">
        <div class="nk-news-box-list">
            <div class="nano">
                <div class="nano-content">
                    {% for i in [0, 1, 2, 3, 4, 5] %}
                    {% set post = posts[i] %}
                    <div class="nk-news-box-item{{ ' nk-news-box-item-active' if i == 0 }}">
                        <div class="nk-news-box-item-img">
                            <img src="{{ post.thumb_sm }}" alt="{{ post.title }}">
                        </div>
                        <img src="{{ post.thumb_full }}" alt="{{ post.title }}" class="nk-news-box-item-full-img">
                        <h3 class="nk-news-box-item-title">{{ post.title }}</h3>
                        {% if post.categories %}
                        <span class="nk-news-box-item-categories">
                            {{ post.categories[0] | safe }}
                        </span>
                        {% endif %}
                        <div class="nk-news-box-item-text">
                            {{ post.excerpt | safe }}
                        </div>
                        <a href="{{ post.url | safe }}" class="nk-news-box-item-url">Read More</a>
                        <div class="nk-news-box-item-date"><span class="fa fa-calendar"></span> {{ post.date }}</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="nk-news-box-each-info">
            <div class="nano">
                <div class="nano-content">
                    <!-- There will be inserted info about selected news-->
                    <div class="nk-news-box-item-image">
                        <img src="{{ posts[0].thumb_full }}" alt="">
                        <span class="nk-news-box-item-categories">
                            {{ posts[0].categories[0] | safe }}
                        </span>
                    </div>
                    <h3 class="nk-news-box-item-title">{{ posts[0].title }}</h3>
                    <div class="nk-news-box-item-text">
                        {{ posts[0].excerpt | safe }}
                    </div>
                    <a href="{{ posts[0].url }}" class="nk-news-box-item-more">Read More</a>
                    <div class="nk-news-box-item-date">
                        <span class="fa fa-calendar"></span> {{ posts[0].date }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="nk-gap-2"></div>
    <div class="nk-blog-grid">
        <div class="row">
            {% for i in [4, 5, 6, 7] %}
            {% set post = posts[i] %}
            <div class="col-md-6 col-lg-3">
                <!-- START: Post -->
                <div class="nk-blog-post">
                    <a href="{{ post.url }}" class="nk-post-img">
                        <img src="{{ post.thumb_lg }}" alt="{{ post.title }}">
                        <span class="nk-post-comments-count">{{ post.comments_count }}</span>
                        {% if post.categories %}
                        <span class="nk-post-categories">
                                    {{ post.categories[0] | safe }}
                                </span>
                        {% endif %}
                    </a>
                    <div class="nk-gap"></div>
                    <h2 class="nk-post-title h4"><a href="{{ post.url }}">{{ post.title }}</a></h2>
                    <div class="nk-post-text">
                        {{ post.excerpt | safe }}
                    </div>
                    <div class="nk-gap"></div>
                    <a href="{{ post.url | safe }}" class="nk-btn nk-btn-rounded nk-btn-color-dark-3 nk-btn-hover-color-main-1">Read More</a>
                    <div class="nk-post-date float-right"><span class="fa fa-calendar"></span> {{ post.date }}</div>
                </div>
                <!-- END: Post -->
            </div>
            {% endfor %}
        </div>
    </div>
    <!-- END: Latest News -->

    <div class="nk-gap-2"></div>
    <div class="row vertical-gap">
        <div class="col-lg-8">

            <!-- START: Latest Posts -->
            <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Latest</span> Posts</span></h3>
            <div class="nk-gap"></div>
            <div class="nk-blog-grid">
                <div class="row">
                    {% for i in [4, 5] %}
                    {% set post = posts[i] %}
                    <div class="col-md-6">
                        <!-- START: Post -->
                        <div class="nk-blog-post">
                            <a href="{{ post.url }}" class="nk-post-img">
                                <img src="{{ post.thumb_lg }}" alt="{{ post.title }}">
                                <span class="nk-post-comments-count">{{ post.comments_count }}</span>
                            </a>
                            <div class="nk-gap"></div>
                            <h2 class="nk-post-title h4"><a href="{{ post.url }}">{{ post.title }}</a></h2>
                            <div class="nk-post-by">
                                <img src="{{ users[post.by].avatar | safe }}" alt="{{ users[post.by].name | safe }}" class="rounded-circle" width="35"> by <a href="{{ users[post.by].url | safe }}">{{ users[post.by].name | safe }}</a> in {{ post.date }}
                            </div>
                            <div class="nk-gap"></div>
                            <div class="nk-post-text">
                                {{ post.excerpt | safe }}
                            </div>
                            <div class="nk-gap"></div>
                            <a href="{{ post.url | safe }}" class="nk-btn nk-btn-rounded nk-btn-color-dark-3 nk-btn-hover-color-main-1">Read More</a>
                        </div>
                        <!-- END: Post -->
                    </div>
                    {% endfor %}
                </div>
            </div>
            <!-- END: Latest Posts -->

            <!-- START: Latest Matches -->
            <div class="nk-gap-2"></div>
            <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Latest</span> Matches</span></h3>
            <div class="nk-gap"></div>
            <div class="row">
                <div class="col-md-4">
                    <div class="nk-match-score bg-dark-3">
                        Now Playing
                    </div>
                    <div class="nk-gap-2"></div>
                    <div class="nk-widget-match p-0">
                        <div class="nk-widget-match-teams">
                            <div class="nk-widget-match-team-logo">
                                <img src="assets/images/team-1.jpg" alt="">
                            </div>
                            <div class="nk-widget-match-vs">VS</div>
                            <div class="nk-widget-match-team-logo">
                                <img src="assets/images/team-2.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="nk-gap-2"></div>
                    <p>As she said this she looked down at her hands and was surprised to see.</p>
                    <a href="tournaments.html" class="nk-btn nk-btn-rounded nk-btn-color-main-1">Match Details</a>
                </div>
                <div class="col-md-8">
                    <div class="responsive-embed responsive-embed-16x9">
                        <iframe src="https://player.twitch.tv/?channel=eulcs&autoplay=false" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
                    </div>
                </div>
            </div>
            <div class="nk-gap"></div>
            <div class="nk-match">
                <div class="nk-match-team-left">
                    <a href="#">
                        <span class="nk-match-team-logo">
                            <img src="assets/images/team-1.jpg" alt="">
                        </span>
                        <span class="nk-match-team-name">
                            SK Telecom T1
                        </span>
                    </a>
                </div>
                <div class="nk-match-status">
                    <a href="#">
                        <span class="nk-match-status-vs">VS</span>
                        <span class="nk-match-status-date">Apr 28, 2018 8:00 pm</span>
                        <span class="nk-match-score bg-danger">
                            2 : 17
                        </span>
                    </a>
                </div>
                <div class="nk-match-team-right">
                    <a href="#">
                        <span class="nk-match-team-name">
                            Cloud 9
                        </span>
                        <span class="nk-match-team-logo">
                            <img src="assets/images/team-2.jpg" alt="">
                        </span>
                    </a>
                </div>
            </div>

            <div class="nk-match">
                <div class="nk-match-team-left">
                    <a href="#">
                        <span class="nk-match-team-logo">
                            <img src="assets/images/team-3.jpg" alt="">
                        </span>
                        <span class="nk-match-team-name">
                            Counted logic gaming
                        </span>
                    </a>
                </div>
                <div class="nk-match-status">
                    <a href="#">
                        <span class="nk-match-status-vs">VS</span>
                        <span class="nk-match-status-date">Apr 15, 2018 9:00 pm</span>
                        <span class="nk-match-score bg-success">
                            28 : 19
                        </span>
                    </a>
                </div>
                <div class="nk-match-team-right">
                    <a href="#">
                        <span class="nk-match-team-name">
                            SK Telecom T1
                        </span>
                        <span class="nk-match-team-logo">
                            <img src="assets/images/team-1.jpg" alt="">
                        </span>
                    </a>
                </div>
            </div>

            <div class="nk-match">
                <div class="nk-match-team-left">
                    <a href="#">
                        <span class="nk-match-team-logo">
                            <img src="assets/images/team-4.jpg" alt="">
                        </span>
                        <span class="nk-match-team-name">
                            Team SoloMid
                        </span>
                    </a>
                </div>
                <div class="nk-match-status">
                    <a href="#">
                        <span class="nk-match-status-vs">VS</span>
                        <span class="nk-match-status-date">Apr 28, 2018 8:00 pm</span>
                        <span class="nk-match-score bg-dark-1">
                            13 : 13
                        </span>
                    </a>
                </div>
                <div class="nk-match-team-right">
                    <a href="#">
                        <span class="nk-match-team-name">
                            SK Telecom T1
                        </span>
                        <span class="nk-match-team-logo">
                            <img src="assets/images/team-1.jpg" alt="">
                        </span>
                    </a>
                </div>
            </div>
            <!-- END: Latest Matches -->

            <!-- START: Tabbed News  -->
            <div class="nk-gap-3"></div>
            <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Tabbed</span> News</span></h3>
            <div class="nk-gap"></div>
            <div class="nk-tabs">
                <!--
                    Additional Classes:
                        .nav-tabs-fill
                -->
                <ul class="nav nav-tabs nav-tabs-fill" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="#tabs-1-1" role="tab" data-toggle="tab">Action</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tabs-1-2" role="tab" data-toggle="tab">MMO</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tabs-1-3" role="tab" data-toggle="tab">Strategy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tabs-1-4" role="tab" data-toggle="tab">Adventure</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tabs-1-5" role="tab" data-toggle="tab">Racing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tabs-1-6" role="tab" data-toggle="tab">Indie</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade show active" id="tabs-1-1">
                        <div class="nk-gap"></div>
                        <!-- START: Action Tab -->
                        {{ tabs_news(1, [6, 8], '<span class="bg-main-1">Action</span>') }}
                        <!-- END: Action Tab -->
                        <div class="nk-gap"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-2">
                        <div class="nk-gap"></div>
                        <!-- START: MMO Tab -->
                        {{ tabs_news(0, [4], '<span class="bg-main-4">MMO</span>') }}
                        <!-- END: MMO Tab -->
                        <div class="nk-gap"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-3">
                        <div class="nk-gap"></div>
                        <!-- START: Strategy Tab -->
                        {{ tabs_news(2, [3], '<span class="bg-main-3">Strategy</span>') }}
                        <!-- END: Strategy Tab -->
                        <div class="nk-gap"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-4">
                        <div class="nk-gap"></div>
                        <!-- START: Adventure Tab -->
                        {{ tabs_news(5, false, '<span class="bg-main-2">Adventure</span>') }}
                        <!-- END: Adventure Tab -->
                        <div class="nk-gap"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-5">
                        <div class="nk-gap"></div>
                        <!-- START: Racing Tab -->
                        {{ tabs_news(6, [2, 3], '<span class="bg-main-5">Racing</span>') }}
                        <!-- END: Racing Tab -->
                        <div class="nk-gap"></div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-6">
                        <div class="nk-gap"></div>
                        <!-- START: Indie Tab -->
                        {{ tabs_news(4, false, '<span class="bg-main-2">Indie</span>') }}
                        <!-- END: Indie Tab -->
                        <div class="nk-gap"></div>
                    </div>
                </div>
            </div>
            <!-- END: Tabbed News -->


            <!-- START: Latest Pictures -->
            <div class="nk-gap"></div>
            <h2 class="nk-decorated-h-2 h3"><span><span class="text-main-1">Latest</span> Pictures</span></h2>
            <div class="nk-gap"></div>
            <div class="nk-popup-gallery">
                <div class="row vertical-gap">
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-1.jpg" class="nk-gallery-item" data-size="1016x572">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-1-thumb.jpg" alt="">
                            </a>
                            <div class="nk-gallery-item-description">
                                <h4>Called Let</h4>
                                Divided thing, land it evening earth winged whose great after. Were grass night. To Air itself saw bring fly fowl. Fly years behold spirit day greater of wherein winged and form. Seed open don't thing midst created dry every greater divided of, be man is. Second Bring stars fourth gathering he hath face morning fill. Living so second darkness. Moveth were male. May creepeth. Be tree fourth.
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-2.jpg" class="nk-gallery-item" data-size="1188x594">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-2-thumb.jpg" alt="">
                            </a>
                            <div class="nk-gallery-item-description">
                                Seed open don't thing midst created dry every greater divided of, be man is. Second Bring stars fourth gathering he hath face morning fill. Living so second darkness. Moveth were male. May creepeth. Be tree fourth.
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-3.jpg" class="nk-gallery-item" data-size="625x350">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-3-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-4.jpg" class="nk-gallery-item" data-size="873x567">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-4-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-5.jpg" class="nk-gallery-item" data-size="471x269">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-5-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-6.jpg" class="nk-gallery-item" data-size="472x438">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-6-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Latest Pictures -->

            <!-- START: Best Selling -->
            <div class="nk-gap-3"></div>
            <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Best</span> Selling</span></h3>
            <div class="nk-gap"></div>
            <div class="row vertical-gap">
                {% for i in [10, 11, 12, 13] %}
                {% set product = shop[i] %}
                <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: Best Selling -->
        </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-all.html" %}
            </aside>
            <!-- END: Sidebar -->
        </div>
    </div>
</div>

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