// #region Imports
import { html } from '../../../Dom/Html';
import { when } from '../../Directives/Directives';
import { Appearance } from '../../Types/Appearance';
import { DrawerMode } from '../../Types/DrawerMode';
import { Fit } from '../../Types/Fit';
// #endregion
/**
 * The template of the {@link 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}">
                    <nav part="nav">
                        <slot name="nav"></slot>
                    </nav>
                </mosaik-drawer>
                `)}
                <mosaik-drawer-content slot="content"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}">
                    ${when(e.hasHeader, () => html `
                    <mosaik-app-header part="header"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}"
                                       .scrollTargetFn="${() => e.content}">
                        ${when(e.hasNav, () => html `
                        <mosaik-button slot="menu"
                                       .appearance="${Appearance.Plain}"
                                       .icon="${'M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993L3 17h18H3Zm0-6 18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993L3 11l18-.002L3 11Zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993L3 5h18H3Z'}"
                                       @click="${() => e.drawer.toggle()}"></mosaik-button>
                        `)}
                        <slot slot="menu"
                              name="headerMenu"></slot>
                        <slot slot="logo"
                              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