// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { flex } from '../../../Directives/Flex/FlexDirective';
import { Appearance } from '../../../Types/Appearance';
import { MessageBoxButtons } from '../../../Types/MessageBoxButtons';
import { Size } from '../../../Types/Size';
import { Spacing } from '../../../Types/Spacing';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * The template of the {@link MessageBoxElement}.
 *
 * @public
 */
export function messageBoxElementTemplate(e) {
    return html `
        <mosaik-dialog part="dialog"
                       .lang="${e.lang}"
                       .dir="${e.dir}"
                       .appearance="${e.appearance}"
                       .isOpen="${e.isOpen}"
                       .hasBackdrop="${e.hasBackdrop}"
                       .closeable="${e.closeable}"
                       .clickOutsideToClose="${e.clickOutsideToClose}"
                       .pressEscapeToClose="${e.pressEscapeToClose}"></mosaik-dialog>
            <mosaik-dialog-header part="header"
                                  .text="${e.header}"
                                  .subText="${e.subHeader}"></mosaik-dialog-header>
            <mosaik-dialog-content part="content">
                <div ${flex({ direction: 'row', gap: '16px' })}>
                    ${when(e.icon, () => html `
                    <mosaik-icon part="icon"
                                 .size="${Size.Large}"
                                 .data="${e.icon}"></mosaik-icon>
                    `)}
                    <mosaik-spacer .thickness="${Spacing.Vertical}"></mosaik-spacer>
                    ${when(e.message, () => html `
                    <mosaik-text part="content"
                                 .text="${e.message}"
                                 .wrap="${true}"></mosaik-text>
                    `)}
                </div>
            </mosaik-dialog-content>
            <mosaik-dialog-actions part="actions">
                ${when(e.buttons === MessageBoxButtons.OK, () => html `
                <mosaik-button part="actionOk"
                                .label="${e.labels.ok ?? 'OK'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Solid}"
                                @click="${() => e.onDialogResult('ok')}"></mosaik-button>
                `)}
                ${when(e.buttons === MessageBoxButtons.OKCancel, () => html `
                <mosaik-button part="actionOk"
                               .label="${e.labels.ok ?? 'OK'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Solid}"
                                @click="${() => e.onDialogResult('ok')}"></mosaik-button>
                <mosaik-button part="actionCancel"
                               .label="${e.labels.cancel ?? 'Cancel'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Plain}"
                                @click="${() => e.onDialogResult('cancel')}"></mosaik-button>
                `)}
                ${when(e.buttons === MessageBoxButtons.YesNo, () => html `
                <mosaik-button part="actionYes" .label="${e.labels.yes ?? 'Yes'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Solid}"
                                @click="${() => e.onDialogResult('yes')}"></mosaik-button>
                <mosaik-button part="actionNo" .label="${e.labels.no ?? 'No'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Plain}"
                                @click="${() => e.onDialogResult('no')}"></mosaik-button>
                `)}
                ${when(e.buttons === MessageBoxButtons.YesNoCancel, () => html `
                <mosaik-button part="actionYes" .label="${e.labels.yes ?? 'Yes'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Solid}"
                                @click="${() => e.onDialogResult('yes')}"></mosaik-button>
                <mosaik-button part="actionNo" .label="${e.labels.no ?? 'No'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Plain}"
                                @click="${() => e.onDialogResult('no')}"></mosaik-button>
                <mosaik-button part="actionCancel" .label="${e.labels.cancel ?? 'Cancel'}"
                                .variant="${Variant.Primary}"
                                .appearance="${Appearance.Plain}"
                                @click="${() => e.onDialogResult('cancel')}"></mosaik-button>
                `)}
            </mosaik-dialog-actions>
        </mosaik-dialog>
    `;
}
//# sourceMappingURL=MessageBoxElementTemplate.js.map