{% set header_title = 'Blog Grid' %}
{% set background_top = 'assets/images/bg-top-2.png' %}
{% set breadcrumbs = [
    '<a href="index.html">Home</a>',
    '<a href="#">Blog</a>',
    '<span>Blog Grid</span>'
] %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
<div class="container">
    <div class="row vertical-gap">
        <div class="col-lg-8">

            <!-- 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>
                            </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>

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