// #region Imports
import { html } from '../../../Dom/Html';
import { when } from '../../Directives/Directives';
import { DrawerMode } from '../../Types/DrawerMode';
import { Fit } from '../../Types/Fit';
// #endregion
/**
 * The template of the `AppElement`.
 *
 * @public
 */
export function appElementTemplate(e) {
    return html `
        <mosaik-theme2 .theme="${e.theme}">
            <mosaik-drawer-container .lang="${e.lang}"
                                     .dir="${e.dir}"
                                     .fit="${Fit.Both}"
                                     .hasBackdrop="${e.isMobile}">
                ${when(e.hasNav, () => html `
                <mosaik-drawer slot="drawer"
                               part="drawer"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .isOpen="${e.isNavOpen}"
                               .mode="${e.isMobile ? DrawerMode.Push : DrawerMode.Side}"
                               .hasBackdrop="${e.isMobile}"
                               .hasShadow="${e.isMobile}"
                               .clickOutsideToClose="${e.isMobile}">
                    <nav part="nav">
                        <slot name="nav"></slot>
                    </nav>
                </mosaik-drawer>
                `)}
                <mosaik-drawer-content slot="content"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}">
                    <slot name="header"></slot>
                    ${when(e.hasHeader, () => html `
                    <!-- TODO: check if this static header really needs to be here -->
                    <!-- we want to provide the header only via slot -->
                    <mosaik-app-header part="header"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}"
                                       .isToggled="${e.isNavOpen}"
                                       .scrollTargetFn="${() => e.content}">
                        <slot slot="menu"
                              name="headerMenu"></slot>
                        <slot slot="brand"
                              name="headerLogo"></slot>
                        <slot slot="actions"
                              name="headerActions"></slot>
                    </mosaik-app-header>
                    `)}
                    <main part="content">
                        <slot name="content"></slot>
                    </main>
                    <slot name="footer"></slot>
                </mosaik-drawer-content>
            </mosaik-drawer-container>
        </mosaik-theme2>
    `;
}
//# sourceMappingURL=AppElementTemplate.js.map