{% set header_title = 'News' %}
{% set background_top = 'assets/images/bg-top-5.png' %}
{% set breadcrumbs = [
    '<a href="index.html">Home</a>',
    '<span>News</span>'
] %}
{% 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">
    <div class="row vertical-gap">
        <div class="col-lg-8">

            <!-- START: Tabs  -->
            <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: Tabs -->


            <!-- START: Posts Grid -->
            <div class="nk-blog-grid">
                <div class="row">
                    {% for post in posts %}
                    <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>
                                {% 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>

                <!-- START: Pagination -->
                <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>
            <!-- END: Posts Grid -->

        </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-2"></div>
{% endblock %}