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

{% block main_content %}
<div class="bg-white">
    <div class="container" id="content">
        <div class="row align-items-stretch g-0">
            <aside class="col-12 col-lg-4 d-flex flex-column bg-light d-lg-none" aria-label="Statement listing">
                <button class="btn btn-outline-primary w-100" type="button" data-bs-toggle="collapse"
                    data-bs-target="#blog_sidebar" aria-expanded="false" aria-controls="collapseExample">
                    Statement listing
                    <i class="bi bi-chevron-down"></i>
                </button>
                <div id="blog_sidebar" class="collapse">
                    {% 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' %}

                    {% 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>
                    <p>{{ self.date|date:"DATE_FORMAT" }}</p>

                    <p class="lead">{{ self.introduction }}</p>

                    {{ self.prepared_body|safe }}

                    {% bibliography self %}

                    {% 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>
    <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 %}