// #region Imports
import { html } from '../../../../Dom/Html';
import { ref, when } from '../../../Directives/Directives';
// #endregion
/**
 * Renders the template for the TileManagerTileElement.
 *
 * @param host - The tile element host.
 * @returns The template result.
 *
 * @public
 */
/**
 * Icon for maximize action (expand corners outward).
 */
const MAXIMIZE_ICON = 'M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3';
/**
 * Icon for restore/minimize action (shrink corners inward).
 */
const RESTORE_ICON = 'M4 14h6v6m10-10h-6V4M20 14l-6 6M4 10l6-6';
/**
 * Renders the template for the TileManagerTileElement.
 *
 * @param host - The tile element host.
 * @returns The template result.
 *
 * @public
 */
export function tileManagerTileElementTemplate(host) {
    const hasMaximizeSlot = !host.disableMaximize && !host.fullscreen;
    const hasFullscreenSlot = !host.disableFullscreen;
    const showResize = !host.resizeDisabled;
    const isMaximized = host.maximized;
    const maximizeIcon = isMaximized ? RESTORE_ICON : MAXIMIZE_ICON;
    const maximizeLabel = isMaximized ? 'Restore' : 'Maximize';
    return html `
        <div part="base" ${ref(host.tileContentRef)}>
            <div part="header" ${ref(host.headerRef)}>
                <div part="title">
                    <slot name="title"></slot>
                </div>
                <div part="actions">
                    ${when(hasMaximizeSlot, () => html `
                    <slot name="maximize-action">
                        <mosaik-button part="maximize-button"
                                       aria-label="${maximizeLabel}"
                                       .appearance="${'plain'}"
                                       .icon="${maximizeIcon}"
                                       @click="${() => void host.handleMaximize()}"></mosaik-button>
                    </slot>
                    `)}
                    ${when(hasFullscreenSlot, () => html `
                    <slot name="fullscreen-action">
                        <mosaik-button part="fullscreen-button"
                                       aria-label="Fullscreen"
                                       .appearance="${'plain'}"
                                       .icon="${'M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'}"
                                       @click="${() => host.handleFullscreen()}"></mosaik-button>
                    </slot>
                    `)}
                    <slot name="actions"></slot>
                </div>
            </div>
            <div part="content-container">
                <slot></slot>
            </div>
        </div>

        <!-- Resize handles - DragResizeController handles events via pointerdown on host -->

        ${when(showResize, () => html `
        <div class="resize-container"
                role="group"
                aria-label="Resize handles">
            <div class="resize-handle side"
                 part="trigger-side"
                 role="separator"
                 aria-orientation="vertical"
                 aria-label="Resize width"
                 tabindex="0">
                <slot name="side-adorner"></slot>
            </div>
            <div class="resize-handle corner"
                 part="trigger"
                 role="separator"
                 aria-label="Resize width and height"
                 tabindex="0">
                <slot name="corner-adorner"></slot>
            </div>
            <div class="resize-handle bottom"
                 part="trigger-bottom"
                 role="separator"
                 aria-orientation="horizontal"
                 aria-label="Resize height"
                 tabindex="0">
                <slot name="bottom-adorner"></slot>
            </div>
        </div>
        `)}
    `;
}
//# sourceMappingURL=TileManagerTileElementTemplate.js.map