{% load ui_props %}

<c-vars title=""
        title_suffix=""
        theme="system"
        theme_storage_key="ui-theme"
        asset_version=""
        include_assets="True"
        css_href=""
        js_src=""
        minimal="False"
        shell_id="page-shell"
        nav_id="page-nav"
        main_id="main-content"
        footer_id="page-footer" />
<c-layouts.base title="{{ title }}"
                title_suffix="{{ title_suffix }}"
                theme="{{ theme }}"
                theme_storage_key="{{ theme_storage_key }}"
                asset_version="{{ asset_version }}"
                :include_assets="include_assets"
                css_href="{{ css_href }}"
                js_src="{{ js_src }}">
    <c-slot name="head">
        {{ head }}
    </c-slot>
    <div id="{{ shell_id }}"
         data-ui-page-shell
         data-layout="guest"
         class="bg-app text-foreground">
        {% if nav and not minimal|ui_bool %}
            <header data-ui-page-header>
                <nav id="{{ nav_id }}" data-ui-page-nav aria-label="Primary">
                    {{ nav }}
                </nav>
            </header>
        {% endif %}
        <c-ui.app.main :id="main_id" data-ui-page-main>
            {{ slot }}
        </c-ui.app.main>
        {% if footer and not minimal|ui_bool %}
            <footer id="{{ footer_id }}" data-ui-page-footer>
                {{ footer }}
            </footer>
        {% endif %}
    </div>
    <c-slot name="scripts">
        {{ scripts }}
    </c-slot>
</c-layouts.base>