{% extends settings.utils.LayoutSettings.base_template %}
{% load wagtailroutablepage_tags %}
{% load bibliography %}

{% block extra_meta %}
    <link rel="alternate" type="application/atom+xml" title="{{ blog_feed_title }}" href="{% url 'blog_feed' %}">
{% endblock extra_meta %}

{% block main_content %}
<div class="bg-white">
    <div id="content">
        <div class="container">
            <div class="row align-items-start g-0">
                <aside class="col-12 col-lg-4 d-flex flex-column bg-light d-lg-none" aria-label="Blog listing">
                    <div class="d-none d-lg-block">
                        {% include "includes/blog_sidebar.html" with siblings=siblings current=self %}
                    </div>
                </aside>
                <main class="col-12 col-lg-8">
                    <div class="px-3 px-xl-5 mb-5">

                        {% include 'includes/breadcrumbs.html' %}

                        <button
                            class="btn btn-outline-primary w-100 mb-3 d-lg-none collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#blog_sidebar"
                            aria-expanded="false"
                            aria-controls="collapseExample"
                        >
                            Blog listing
                            <i class="bi bi-chevron-down"></i>
                        </button>
                        <div id="blog_sidebar" class="mb-3 collapse">
                            {% include "includes/blog_sidebar.html" with siblings=siblings current=self %}
                        </div>

                        {% include "includes/blog_filters.html" with topics=topics parent_url=parent_url %}
                        {% if filter_text %}
                            <p class="h6">{{ filter_text }}</p>
                        {% endif %}
                        <h1>{{ self.title }}</h1>
                        {% include "includes/blog_authors.html" with post=self %}
                        <p>{{ self.date|date:"DATE_FORMAT" }}</p>
                        <p class="lead">{{ self.introduction }}</p>

                        {{ self.prepared_body|safe }}

                        {% bibliography self %}
                        <hr>
                    </div>

                    <div class="px-3 px-xl-5 mt-5 mb-5">
                        {% include "includes/social_share.html" with page=self settings=settings current_site=current_site only %}
                    </div>
                    <nav aria-label="blog" class="row g-0 d-none d-lg-flex">
                        <div class="col-6 bg-primary p-4 ps-5 d-flex align-items-center">
                            <a class="text-white" href="{{ self.previous.url }}">
                                <p class="sub">
                                    <div class="h6 text-uppercase">Previous</div>{{ self.previous.title }}
                                </p>
                            </a>
                        </div>
                        <div class="col-6 bg-secondary p-4 pe-5 d-flex align-items-center">
                            <a class="text-white" href="{{ self.next.url }}">
                                <p class="sub">
                                    <div class="h6 text-uppercase">Next</div>{{ self.next.title }}
                                </p>
                            </a>
                        </div>
                    </nav>
                </main>
                <aside class="col-12 col-lg-4 flex-column bg-light d-none d-lg-flex">
                    {% include "includes/blog_sidebar.html" with siblings=siblings current=self %}
                </aside>
            </div>
        </div>
    </div>
    <nav aria-label="blog" class="row g-0 d-lg-none">
        <div class="col-12 bg-primary p-4">
            <a class="text-white" href="{{ self.previous.url }}">
                <p>
                    <div class="h6 text-uppercase">Previous</div>{{ self.previous.title }}
                </p>
            </a>
        </div>
        <div class="col-12 bg-secondary p-4">
            <a class="text-white" href="{{ self.next.url }}">
                <p>
                    <div class="h6 text-uppercase">Next</div>{{ self.next.title }}
                </p>
            </a>
        </div>
    </nav>
</div>

{% endblock %}