// #region Imports
import { when } from '../../../Directives/Directives';
import { html } from '../../../../Dom/Html';
import { TimeFormatter } from '../../../../Intl/Formatters/TimeFormatter';
import { Orientation } from '../../../Types/Orientation';
import { ITimeSpan } from '../../../Types/TimeSpan';
// #endregion
/**
 * The template of the `EpgProgramElement`.
 *
 * @public
 */
export function epgProgramElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        <slot>
            <mosaik-text part="header"
                         .text="${e.header}"
                         .disabled="${e.disabled}"
                         .wrap="${true}"
                         .lang="${e.lang}"
                         .dir="${e.dir}"></mosaik-text>
            <mosaik-stack .orientation="${Orientation.Horizontal}"
                          .gap="${'4px'}">
                <mosaik-text part="content"
                            .text="${TimeFormatter.format(e.start, 'HH:mm', e.locale)} - ${TimeFormatter.format(e.end, 'HH:mm', e.locale)}"
                            .readonly="${true}"
                            .disabled="${e.disabled}"
                            .wrap="${true}"
                            .lang="${e.lang}"
                            .dir="${e.dir}"></mosaik-text>
                <mosaik-text part="content"
                            .text="${ITimeSpan.toMinutes(ITimeSpan.fromDates(e.start, e.end, e.locale))} minutes"
                            .readonly="${true}"
                            .disabled="${e.disabled}"
                            .wrap="${true}"
                            .lang="${e.lang}"
                            .dir="${e.dir}"></mosaik-text>

            </mosaik-stack>
        </slot>
    `;
}
//# sourceMappingURL=EpgProgramElementTemplate.js.map