{% set header_title = 'Blog List' %}
{% set header_show = false %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
    <div class="container">
        <div class="nk-gap-4"></div>

        <!-- START: Posts List -->
        <div class="nk-blog-list">

            {% for post in posts %}
                <!-- START: Post -->
                <div class="nk-blog-post" data-mouse-parallax-z="5" data-mouse-parallax-speed="1">
                    <div class="nk-post-thumb">
                        {% if post.type == 'image' %}
                            <div class="nk-post-type"><span class="ion-image"></span></div>
                        {% elif post.type == 'video' %}
                            <div class="nk-post-type"><span class="ion-videocamera"></span></div>
                        {% elif post.type == 'audio' %}
                            <div class="nk-post-type"><span class="ion-music-note"></span></div>
                        {% elif post.type == 'gallery' %}
                            <div class="nk-post-type"><span class="ion-images"></span></div>
                        {% elif post.type == 'quote' %}
                            <div class="nk-post-type"><span class="ion-quote"></span></div>
                        {% endif %}
                        <div class="nk-post-category">
                            {{ post.cat | safe}}
                        </div>
                        <a href="{{ post.url }}">
                            <img src="{{ post.thumb_lg }}" alt="" class="nk-img-stretch">
                        </a>
                    </div>
                    <div class="nk-post-content">
                        <div data-mouse-parallax-z="2">
                            <h2 class="nk-post-title h1">
                                <a href="{{ post.url }}">{{ post.title }}</a>
                            </h2>
                            <div class="nk-post-date">
                                {{ post.date }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: Post -->
            {% endfor %}

            <!-- START: Pagination -->
            <div class="nk-pagination nk-pagination-center">
                <a href="#" class="nk-btn nk-btn-lg nk-btn-circle">Load More ...</a>
            </div>
            <!-- END: Pagination -->
        </div>
        <!-- END: Posts List -->

        <div class="nk-gap-4"></div>
        <div class="nk-gap-3"></div>

    </div>
{% endblock %}