{% extends "layout.html" %}
{% block body %}

        <!-- Page Header-->
        <header class="masthead mb-0" style="background-image: url('  static/img/home-bg.jpg   ')">
            <div class="container position-relative px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="site-heading">
                            <h1>{{ params['blog_name'] }}</h1>
                            <span class="subheading">{{ params['tag_line'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>


        <!-- Message Flashing -->
{% with messages = get_flashed_messages(with_categories=true)%}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{category}} alert-dismissible fade show" role="alert">
  {{message}}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
{% endfor %}
{% endif %}
{% endwith %}

    
        <!-- Main Content-->
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">


                <!-- Todo: Fetch it using for loop from the database -->
                    <!-- Post preview-->

                {% for post in posts %}

                    <div class="post-preview">
                        <a href="/post/{{post.slug}}">
                            <h2 class="post-title">{{ post.title }}</h2>
                            <h3 class="post-subtitle">{{post.tagline}}</h3>
                        </a>
                        <p class="post-meta">
                            Posted by
                            <a href="#!">AP</a>
                            on {{post.date}}
                        </p>
                    </div>
                    {{post.content[0:143]}}...
                    <!-- Divider-->
                    <hr class="my-4" />
                {% endfor %}
                    <!-- Pager-->
                    <!-- <div class="d-flex justify-content-end mb-4"> -->
                    <div class="d-flex justify-content-between mb-4">
                        <a class="btn btn-primary" href="{{prev}}">&larr; Previous Posts</a>
                        <a class="btn btn-primary" href="{{next}}">Next Posts &rarr;</a>
                    </div>

                </div>
            </div>
        </div>

        {% endblock %}