// #region Imports
import { html } from '../../../../Dom/Html';
import { choose, when } from '../../../Directives/Directives';
import { partMap } from '../../../Directives/part-map/PartMapDirective';
// #endregion
/**
 * The template function for the {@link SchedulerEventElement}.
 *
 * @internal
 */
export function schedulerEventElementTemplate(e) {
    return html `
        <mosaik-popup part="popup"
                        .lang="${e.lang}"
                        .dir="${e.dir}"
                        .for="${'container'}"
                        .placement="${'right-start'}"
                        .placements="${['right-start', 'left-start']}"
                        .flip="${true}"
                        .trigger="${'hover'}"
                        .interactive="${true}"
                        .clickOutsideToClose="${true}">
            <mosaik-stack slot="content"
                            .lang="${e.lang}"
                            .dir="${e.dir}"
                            .orientation="${'vertical'}">
                <mosaik-stack .lang="${e.lang}"
                                .dir="${e.dir}"
                                .orientation="${'horizontal'}">
                    <mosaik-dot .lang="${e.lang}"
                                .dir="${e.dir}"
                                .variant="${e.variant}"></mosaik-dot>
                    <mosaik-text .lang="${e.lang}"
                                    .dir="${e.dir}"
                                    .text="${e.getSlotContent('title')}"></mosaik-text>
                </mosaik-stack>
                <mosaik-text .lang="${e.lang}"
                                .dir="${e.dir}"
                                .text="${e.getSlotContent('content')}"></mosaik-text>
                <mosaik-text .lang="${e.lang}"
                                .dir="${e.dir}"
                                .text="start: ${e.start.toDateString()}"></mosaik-text>
                <mosaik-text .lang="${e.lang}"
                                .dir="${e.dir}"
                                .text="end: ${e.end.toDateString()}"></mosaik-text>
            </mosaik-stack>
        </mosaik-popup>
        ${choose(e.view, [
        ['timeGrid', () => html `
            <div id="container" part=${partMap({ 'container': true, 'layout-time-grid': true, 'is-cancelled': e.status === 'cancelled', 'is-tentative': e.status === 'tentative' })}>
                ${when(!e.disabled, () => html `
                    <mosaik-focus-ring part="focusRing"
                                        .lang="${e.lang}"
                                        .dir="${e.dir}"
                                        .variant="${e.variant}"
                                        .visible="${e.isFocused}"
                                        .controlled="${'manual'}"
                                        @connected="${(x) => x.target.attach(e)}"></mosaik-focus-ring>
                    <mosaik-ripple part="ripple"
                                    .lang="${e.lang}"
                                    .dir="${e.dir}"
                                    .variant="${e.variant}"
                                    @connected="${(x) => x.target.attach(e)}"></mosaik-ripple>
                `)}
                <div part="content">
                    <div part="title">
                        <slot name="title"></slot>
                    </div>
                    <div part="subtitle">
                        <slot name="content"></slot>
                    </div>
                    <div part="footer">
                        <slot name="footer"></slot>
                    </div>
                </div>
            </div>
        `],
        ['month', () => html `
            <div id="container" part=${partMap({ 'container': true, 'layout-month': true, 'is-cancelled': e.status === 'cancelled', 'is-tentative': e.status === 'tentative' })}>
                ${when(!e.disabled, () => html `
                    <mosaik-focus-ring part="focusRing"
                                        .lang="${e.lang}"
                                        .dir="${e.dir}"
                                        .variant="${e.variant}"
                                        .visible="${e.isFocused}"
                                        .controlled="${'manual'}"
                                        @connected="${(x) => x.target.attach(e)}"></mosaik-focus-ring>
                    <mosaik-ripple part="ripple"
                                    .lang="${e.lang}"
                                    .dir="${e.dir}"
                                    .variant="${e.variant}"
                                    @connected="${(x) => x.target.attach(e)}"></mosaik-ripple>
                `)}
                <div part="content">
                    <div part="title">
                        <slot name="title"></slot>
                    </div>
                </div>
            </div>
        `],
        ['agenda', () => html `
            <div id="container" part=${partMap({ 'container': true, 'layout-agenda': true, 'is-cancelled': e.status === 'cancelled', 'is-tentative': e.status === 'tentative' })}>
                ${when(!e.disabled, () => html `
                    <mosaik-focus-ring part="focusRing"
                                        .lang="${e.lang}"
                                        .dir="${e.dir}"
                                        .variant="${e.variant}"
                                        .visible="${e.isFocused}"
                                        .controlled="${'manual'}"
                                        @connected="${(x) => x.target.attach(e)}"></mosaik-focus-ring>
                    <mosaik-ripple part="ripple"
                                    .lang="${e.lang}"
                                    .dir="${e.dir}"
                                    .variant="${e.variant}"
                                    @connected="${(x) => x.target.attach(e)}"></mosaik-ripple>
                `)}
                <div part="content">
                    <div part="title">
                        <slot name="title"></slot>
                    </div>
                    <div part="subtitle">
                        <slot name="content"></slot>
                    </div>
                </div>
            </div>
        `]
    ], () => html `
            <div id="container" part=${partMap({ 'container': true, 'is-cancelled': e.status === 'cancelled', 'is-tentative': e.status === 'tentative' })}>
                <div part="content">
                    <div part="title">
                        <slot name="title"></slot>
                    </div>
                </div>
            </div>
        `)}
    `;
}
//# sourceMappingURL=SchedulerEventElementTemplate.js.map