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

{% block content %}
<div class="container">
    <!-- START: Posts FullWidth -->
    <div class="nk-blog-fullwidth">
        {% for i in [0, 1, 2, 3, 4, 5] %}
        <!-- START: Post -->
        <div class="nk-blog-post">
            <a href="{{ posts[i].url }}" class="nk-post-img">
                <img src="{{ posts[i].thumb_fw }}" alt="{{ posts[i].title }}">
                <span class="nk-post-comments-count">{{ posts[i].comments_count }}</span>
            </a>
            <div class="nk-gap-2"></div>
            <div class="row vertical-gap">
                <div class="col-md-8 col-lg-9">
                    <h2 class="nk-post-title h4"><a href="{{ posts[i].url }}">{{ posts[i].title }}</a></h2>
                    <div class="nk-gap"></div>
                    <div class="nk-post-text">
                        {{ posts[i].text | safe }}
                    </div>
                </div>
                <div class="col-md-4 col-lg-3">
                    <div class="nk-post-by">
                        <img src="{{ users[posts[i].by].avatar | safe }}" alt="{{ users[posts[i].by].name | safe }}" class="rounded-circle" width="60">
                        by <a href="{{ users[posts[i].by].url | safe }}">{{ users[posts[i].by].name | safe }}</a>

                        <br> in {{ posts[i].date }}
                        <br> {{ posts[i].comments_count }} comments
                    </div>
                    <div class="nk-gap-3"></div>
                    <div class="text-right">
                        <a href="{{ posts[i].url | safe }}" class="nk-btn nk-btn-rounded nk-btn-color-dark-3 nk-btn-hover-color-main-1">Read More</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Post -->
        {% endfor %}

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

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