{% extends "base.html" %}

{%- block page -%}

    {% block skip %}
        <div class="visually-hidden-focusable"><a href="#content">{{ _('Skip to main content') }}</a></div>
    {% endblock %}

    {#
    Override the header on a page by page basis by extending this block. If
    making sitewide header changes it is preferable to override the header.html
    file.
    #}
    {%- block header %}
        {% include "header.html" %}
    {% endblock -%}

    {# The content block allows you to replace the content of the page if needed #}
    {%- block content %}
        {% block maintag %}<div class="main">{% endblock %}
            <div id="content" class="container">
                {% block main_content %}
                    {% block flash %}
                        <div class="flash-messages">
                            {% block flash_inner %}
                                {% for category, message in h.get_flashed_messages(with_categories=true) %}
                                    {{ ui.alert(h.literal(message), dismissible=true, style=category) }}
                                {% endfor %}
                            {% endblock %}
                        </div>
                    {% endblock %}

                    {% block toolbar %}
                        <div class="toolbar" role="navigation" aria-label="{{ _('Breadcrumb') }}">
                            {% block breadcrumb -%}
                                {% if self.breadcrumb_content() | trim -%}
                                    {%- call ui.util.call(ui.breadcrumb_wrapper) -%}
                                        {{ ui.breadcrumb(_('Home'), h.url_for('home.index'), aria={"label": _("Home")}, initial=true) }}
                                        {%- block breadcrumb_content -%}
                                        {%- endblock %}
                                    {%- endcall %}
                                {% endif %}
                            {% endblock %}
                        </div>
                    {% endblock %}

                    <div class="row {% block wrapper_class %}{% endblock %}">
                        {#
                        The pre_primary block can be used to add content to before the
                        rendering of the main content columns of the page.
                        #}
                        {% block pre_primary %}
                            {% if self.content_action() | trim %}
                                {%- call ui.util.call(ui.content_action_wrapper) -%}
                                    {% block content_action -%}{% endblock %}
                                {%- endcall %}
                            {% endif %}
                        {% endblock %}

                        {% block secondary %}
                            <aside class="secondary col-md-4 col-lg-3">
                                {#
                                The secondary_content block can be used to add content to the
                                sidebar of the page. This is the main block that is likely to be
                                used within a template.

                                Example:

                                {% block secondary_content %}
                                <h2>A sidebar item</h2>
                                <p>Some content for the item</p>
                                {% endblock %}
                                #}
                                {% block secondary_content %}{% endblock %}
                            </aside>
                        {% endblock %}

                        {% block primary %}
                            <div class="primary col" role="main">
                                {#
                                The primary_content block can be used to add content to the page.
                                This is the main block that is likely to be used within a template.

                                Example:

                                {% block primary_content %}
                                <h1>My page content</h1>
                                <p>Some content for the page</p>
                                {% endblock %}
                                #}
                                {% block primary_content %}
                                    <article class="module">
                                        {% block page_header %}
                                            <header class="module-content page-header">
                                                {%- call ui.util.call(ui.content_nav_wrapper) -%}
                                                    {% block content_primary_nav -%}{% endblock %}
                                                {%- endcall %}
                                            </header>
                                        {% endblock %}
                                        <div class="module-content">
                                            {% if self.page_primary_action() | trim %}
                                                {%- call ui.util.call(ui.page_action_wrapper) -%}
                                                    {% block page_primary_action -%}{% endblock %}
                                                {%- endcall %}
                                            {% endif %}
                                            {% block primary_content_inner %}
                                            {% endblock %}
                                        </div>
                                    </article>
                                {% endblock %}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>
        </div>
    {% endblock -%}

    {#
    Override the footer on a page by page basis by extending this block. If
    making sitewide header changes it is preferable to override the footer.html-u
    file.
    #}
    {%- block footer %}
        {% include "footer.html" %}

        <div id="notification-container" class="toast-container bottom-0 end-0 me-1 mb-1 position-fixed">
            <div class="toast">
                <div class="toast-header">'hello'</div>
                <div class="toast-body">world</div>
            </div>
        </div>
    {% endblock -%}
{%- endblock -%}

{%- block scripts %}
    {{ super() }}
    {% asset 'base/main' %}
    {% asset 'theming/midnight-blue-portable/scripts' %}
{% endblock -%}