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

{% block content %}
<div class="container">
    <div class="row vertical-gap">
        <div class="col-lg-8">
            <!-- START: Post -->
            <div class="nk-blog-post nk-blog-post-single">
                <!-- START: Post Text -->
                <div class="nk-post-text mt-0">
                    <div class="nk-post-img">
                        <img src="{{ posts[1].thumb_full }}" alt="{{ posts[1].title }}">
                    </div>
                    <div class="nk-gap-1"></div>
                    <h1 class="nk-post-title h4">{{ posts[1].title }}</h1>
                    <div class="nk-post-by">
                        <img src="{{ users[posts[1].by].avatar | safe }}" alt="{{ users[posts[1].by].name | safe }}" class="rounded-circle" width="35"> by <a href="{{ users[posts[1].by].url | safe }}">{{ users[posts[1].by].name | safe }}</a> in {{ posts[1].date }}

                        {% if posts[1].categories %}
                        <div class="nk-post-categories">
                            {% for cat in posts[1].categories %}
                            {{ cat | safe }}
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    <div class="nk-gap"></div>
                    {% include "shared/blog-content.html" %}

                    <div class="nk-gap"></div>
                    <div class="nk-post-share">
                        <span class="h5">Share Article:</span>

                        <ul class="nk-social-links-2">
                            <li><span class="nk-social-facebook" title="Share page on Facebook" data-share="facebook"><span class="fab fa-facebook"></span></span></li>
                            <li><span class="nk-social-google-plus" title="Share page on Google+" data-share="google-plus"><span class="fab fa-google-plus"></span></span></li>
                            <li><span class="nk-social-twitter" title="Share page on Twitter" data-share="twitter"><span class="fab fa-twitter"></span></span></li>
                            <li><span class="nk-social-pinterest" title="Share page on Pinterest" data-share="pinterest"><span class="fab fa-pinterest-p"></span></span></li>

                            <!-- Additional Share Buttons
                                <li><span class="nk-social-linkedin" title="Share page on LinkedIn" data-share="linkedin"><span class="fab fa-linkedin"></span></span></li>
                                <li><span class="nk-social-vk" title="Share page on VK" data-share="vk"><span class="fab fa-vk"></span></span></li>
                            -->
                        </ul>
                    </div>
                </div>
                <!-- END: Post Text -->

                <!-- START: Similar Articles -->
                <div class="nk-gap-2"></div>
                <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Similar</span> Articles</span></h3>
                <div class="nk-gap"></div>
                <div class="row">
                    {% for i in [2, 3] %}
                    <div class="col-md-6">
                        <!-- START: Post -->
                        <div class="nk-blog-post">
                            <a href="{{ posts[i].url }}" class="nk-post-img">
                                <img src="{{ posts[i].thumb_lg }}" alt="{{ posts[i].title }}">
                                <span class="nk-post-comments-count">{{ posts[i].comments_count }}</span>
                                {% if posts[i].categories %}
                                <span class="nk-post-categories">
                                    {{ posts[i].categories[0] | safe }}
                                </span>
                                {% endif %}
                            </a>
                            <div class="nk-gap"></div>
                            <h2 class="nk-post-title h4"><a href="{{ posts[i].url }}">{{ posts[i].title }}</a></h2>
                        </div>
                        <!-- END: Post -->
                    </div>
                    {% endfor %}
                </div>
                <!-- END: Similar Articles -->

                <!-- START: Comments -->
                <div id="comments"></div>
                <h3 class="nk-decorated-h-2"><span><span class="text-main-1">3</span> Comments</span></h3>
                <div class="nk-gap"></div>
                <div class="nk-comments">
                    <!-- START: Comment -->
                    <div class="nk-comment">
                        <div class="nk-comment-meta">
                            <img src="{{ users[1].avatar | safe }}" alt="{{ users[1].name | safe }}" class="rounded-circle" width="35"> by <a href="{{ users[1].url | safe }}">{{ users[1].name | safe }}</a> in 20 September, 2018
                            <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-dark-3 float-right">Reply</a>
                        </div>
                        <div class="nk-comment-text">
                            <p>This sounded nonsense to Alice, so she said nothing, but set off at once toward the Red Queen. To her surprise, she lost sight of her in a moment, and found herself walking in at the front-door again.</p>
                        </div>

                        <!-- START: Comment -->
                        <div class="nk-comment">
                            <div class="nk-comment-meta">
                                <img src="{{ users[0].avatar | safe }}" alt="{{ users[0].name | safe }}" class="rounded-circle" width="35"> by <a href="{{ users[0].url | safe }}">{{ users[0].name | safe }}</a> in 20 September, 2018
                                <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-dark-3 float-right">Reply</a>
                            </div>
                            <div class="nk-comment-text">
                                <p>To her surprise, she lost sight of her in a moment, and found herself walking in at the front-door again.</p>
                            </div>
                        </div>
                        <!-- END: Comment -->
                    </div>
                    <!-- END: Comment -->

                    <!-- START: Comment -->
                    <div class="nk-comment">
                        <div class="nk-comment-meta">
                            <img src="{{ users[2].avatar | safe }}" alt="{{ users[2].name | safe }}" class="rounded-circle" width="35"> by <a href="{{ users[2].url | safe }}">{{ users[2].name | safe }}</a> in 21 September, 2018
                            <a href="#" class="nk-btn nk-btn-rounded nk-btn-color-dark-3 float-right">Reply</a>
                        </div>
                        <div class="nk-comment-text">
                            <p>The sight of the tumblers restored Bob Sawyer to a degree of equanimity which he had not possessed since his interview with his landlady. His face brightened up, and he began to feel quite convivial.</p>
                        </div>
                    </div>
                    <!-- END: Comment -->
                </div>
                <!-- END: Comments -->

                <!-- START: Reply -->
                <div class="nk-gap-2"></div>
                <h3 class="nk-decorated-h-2"><span><span class="text-main-1">Leave</span> a Reply</span></h3>
                <div class="nk-gap"></div>
                <div class="nk-reply">
                    <form action="#" class="nk-form" novalidate="novalidate">
                        <div class="row sm-gap vertical-gap">
                            <div class="col-md-4">
                                <input type="email" class="form-control required" name="email" placeholder="Email *">
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control required" name="name" placeholder="Name *">
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="name" placeholder="Website">
                            </div>
                        </div>
                        <div class="nk-gap-1"></div>
                        <textarea class="form-control required" name="message" rows="5" placeholder="Message *" aria-required="true"></textarea>
                        <div class="nk-gap-1"></div>
                        <div class="nk-form-response-success"></div>
                        <div class="nk-form-response-error"></div>
                        <button class="nk-btn nk-btn-rounded nk-btn-color-main-1">Post Comment</button>
                    </form>
                </div>
                <!-- END: Reply -->
            </div>
            <!-- END: Post -->
        </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 %}