{% load ui_classes ui_props %}

<c-vars title=""
        title_suffix=""
        theme="system"
        theme_storage_key="ui-theme"
        asset_version=""
        include_assets="True"
        css_href=""
        js_src=""
        nonce=""
        stream_url=""
        stream_scopes=""
        minimal="False"
        height="min"
        shell_id="page-shell"
        nav_id="page-nav"
        main_id="main-content"
        footer_id="page-footer" />
{% ui_class "ui.chrome" "guest" as guest_class %}
<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 }}"
                nonce="{{ nonce }}"
                stream_url="{{ stream_url }}"
                stream_scopes="{{ stream_scopes }}">
    <c-slot name="head">
        {{ head }}
    </c-slot>
    <c-ui.app id="{{ shell_id }}"
              height="{{ height }}"
              data-ui-page-shell
              data-layout="guest"
              class="{{ guest_class }}">
        {% if nav and not minimal|ui_bool %}
            <c-ui.sidebar id="{{ nav_id }}" placement="top" collapse="mobile" data-ui-page-header>
                <c-ui.sidebar.nav data-ui-page-nav label="Primary">
                    {{ nav }}
                </c-ui.sidebar.nav>
            </c-ui.sidebar>
        {% endif %}
        <c-ui.app.main :id="main_id" data-ui-page-main>
            {{ slot }}
        </c-ui.app.main>
        {% if footer and not minimal|ui_bool %}
            <c-ui.app.footer id="{{ footer_id }}" data-ui-page-footer>
                {{ footer }}
            </c-ui.app.footer>
        {% endif %}
    </c-ui.app>
    <c-slot name="scripts">
        {{ scripts }}
    </c-slot>
</c-layouts.base>