{% extends "blogorama/base.html" %}
{% load static %}
{% load i18n %}
{% load markdownify %}
{% block title %}
    Blogorama - Blog Posts
{% endblock title %}
{% block content %}
    <!-- Header-->
    <header class="bg-dark py-5 hero">
        <div class="container px-5">
            <div class="row gx-5 align-items-center justify-content-center">
                <div class="col-lg-8 col-xl-7 col-xxl-6 bg-dark">
                    <div class="my-5 text-center text-xl-start">
                        <h1 class="display-5 fw-bolder text-white mb-2">Blogorama Blog Posts.</h1>
                    </div>
                </div>
                <div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center"></div>
            </div>
        </div>
    </header>
    <!-- Posts -->
    <section class="py-5 bg-light">
        <div class="container px-5 my-5">
            <div class="row gx-5">
                <div class="col-lg-8 py-3">
                    {% for object in object_list %}
                        <div class="card">
                            <img src="https://via.placeholder.com/1800x1200"
                                 class="card-img-top"
                                 alt="..."/>
                            <div class="card-body">
                                <h1 class="card-title">{{ object.title }}</h1>
                                <p class="card-text">{{ object.content|markdownify|truncatechars_html:200 }}</p>
                                <a href="{{ object.get_absolute_url }}" class="btn btn-primary">Continue Reading</a>
                            </div>
                        </div>
                    {% empty %}
                        No Posts yet.
                    {% endfor %}
                </div>
                <div class="col-lg-4 mb-5 mb-lg-0 py-3">Post List</div>
            </div>
            {% comment %} <div class="pagination">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1">&laquo; first</a>
                <a href="?page={{ page_obj.previous_page_number }}">previous</a>
            {% endif %}
            <span class="current">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</span>
            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}">next</a>
                <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
            {% endif %}
        </span>
            </div> {% endcomment %}
            {% if is_paginated %}
                <span class="current">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</span>
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Previous</span>
                            </li>
                        {% endif %}
                        {% for num in page_obj.page_range %}
                            {% if num == page_obj.number %}
                                <li class="page-item disabled">
                                    <a class="page-link" href="">1</a>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="#">1</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Next</span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </section>
{% endblock content %}
