{% extends "django_fundamentals/layouts/base.html" %}

{# APP SHELL: FIXED SIDEBAR ON DESKTOP, OFF-CANVAS DRAWER ON MOBILE. #}
{# THE x-data SITS ON THE OUTER WRAPPER SO BOTH THE NAVBAR'S HAMBURGER #}
{# AND THE SIDEBAR ITSELF SHARE THE SAME `sidebarOpen` STATE.         #}

{% block body %}
<div x-data="{ sidebarOpen: false }" @keydown.escape.window="sidebarOpen = false">

    {% block navbar %}
        {% include "django_fundamentals/organisms/navbar.html" %}
    {% endblock %}

    {# MOBILE BACKDROP #}
    <div x-show="sidebarOpen"
         x-transition.opacity
         @click="sidebarOpen = false"
         class="fixed inset-0 z-sidebar bg-ink/50 lg:hidden"
         x-cloak
         aria-hidden="true"></div>

    {% block sidebar %}
        {% include "django_fundamentals/organisms/sidebar.html" %}
    {% endblock %}

    {# CONTENT COLUMN — OFFSET BY THE SIDEBAR ON DESKTOP ONLY #}
    <div class="lg:pl-sidebar">
        <main id="main-content" class="mx-auto w-full max-w-shell px-4 py-8 sm:px-6 lg:px-8">
            {% include "django_fundamentals/organisms/messages.html" %}

            {% block page_header %}
                {% if page_title %}
                    {% include "django_fundamentals/organisms/page_header.html" %}
                {% endif %}
            {% endblock %}

            {# content_outer WRAPS content SO A SUB-LAYOUT CAN ADD CHROME     #}
            {# AROUND A PAGE WITHOUT THAT PAGE COOPERATING — CHILD TEMPLATES  #}
            {# OVERRIDE content AS USUAL AND LAND INSIDE THE WRAPPER. THIS IS #}
            {# WHAT LETS layouts/settings.html PUT THE TAB RAIL ON allauth'S  #}
            {# OWN PAGES WITHOUT OVERRIDING ANY OF THEM.                      #}
            {% block content_outer %}{% block content %}{% endblock %}{% endblock %}
        </main>

        {% block footer %}
            {% include "django_fundamentals/organisms/footer.html" %}
        {% endblock %}
    </div>
</div>
{% endblock %}