{% extends 'base.html' %}

{% block title %}Blog{% endblock title %}

{% block content %}
    <header class="masthead" style="background: url(&quot;/static/img/bryan-goff-f7YQo-eYHdM-unsplash.jpg&quot;);">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 mx-auto position-relative">
                    <div class="site-heading">
                        <h1><strong>Blog</strong></h1><span class="subheading">you won't find the meaning of life below</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <article>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 mx-auto">
                    {% for post in posts %}
                        <div class="post-preview">
                            <a href="/blog/{{post.slug}}">
                                <h2 class="post-title">{{post.title}}</h2>
                                <h3 class="post-subtitle">{{post.text}}</h3>
                            </a>
                            <p class="post-meta"><b>Posted at:</b>&nbsp;{{post.created_at.strftime('%Y-%m-%d %H:%M')}}</p>
                            {% if user %}
                                <a href="/update-post/{{post.slug}}" style="text-decoration: none; margin-right: 0.7rem;">Update</a>
                                <a href="/delete-post/{{post.slug}}" style="text-decoration: none;">Delete</a>
                            {% endif %}
                        </div>
                        <hr>
                    {% endfor %}
                    {% if posts|length > 5 %}
                        <div class="clearfix">
                            <button class="btn btn-primary float-end" type="button" style="margin-left: 2rem; background: rgb(0, 133, 161);">
                                <a href="/blog?skip={{skip}}" style="text-decoration: none; color: inherit;">Older Posts&nbsp;⇒</a>
                            </button>
                            <button class="btn btn-primary float-end" type="button" style="background: rgb(0, 133, 161);">
                                <a href="/blog?skip={{skip}}&new=true" style="text-decoration: none; color: inherit;">⇐&nbsp;Newer Posts</a>
                            </button>
                        </div>
                    {% endif %}
                    {% if user %}
                        <a href="/add-post" class="btn btn-primary" style="text-decoration: none;">
                            Add
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </article>
{% endblock content %}