{% load ui_classes %}

<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=""
        app_id="ui-app"
        main_id="main-content"
        sidebar="left"
        height="screen"
        surface="0"
        elevation="none"
        scroll="auto"
        header_sticky="True"
        header_surface="inherit"
        header_elevation="none"
        header_divider="True"
        main_surface="inherit"
        main_elevation="none"
        footer_surface="inherit"
        footer_elevation="none"
        aside_surface="inherit"
        aside_elevation="none"/>
{% ui_class "ui.chrome" "fill" as fill_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="{{ app_id }}"
              sidebar="{{ sidebar }}"
              height="{{ height }}"
              surface="{{ surface }}"
              elevation="{{ elevation }}">
        {{ nav }}
        {% if header %}
        <c-ui.app.header :sticky="header_sticky"
                         surface="{{ header_surface }}"
                         elevation="{{ header_elevation }}"
                         :divider="header_divider">
            {{ header }}
        </c-ui.app.header>
        {% endif %}
        <c-ui.app.main id="{{ main_id }}"
                       scroll="none"
                       surface="{{ main_surface }}"
                       elevation="{{ main_elevation }}">
            {% if scroll == "none" %}
            {{ slot }}
            {% else %}
            <c-ui.scroll-area fill class="{{ fill_class }}">
                {{ slot }}
            </c-ui.scroll-area>
            {% endif %}
        </c-ui.app.main>
        {% if footer %}
        <c-ui.app.footer surface="{{ footer_surface }}" elevation="{{ footer_elevation }}">
            {{ footer }}
        </c-ui.app.footer>
        {% endif %}
        {% if aside %}
        <c-ui.app.aside surface="{{ aside_surface }}" elevation="{{ aside_elevation }}">
            {{ aside }}
        </c-ui.app.aside>
        {% endif %}
    </c-ui.app>
    <c-slot name="scripts">
        {{ scripts }}
    </c-slot>
</c-layouts.base>