// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { live, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { Orientation } from '../../../Types/Orientation';
// #endregion
/**
 * The template of the `EpgElement`.
 *
 * @public
 */
export function epgElementTemplate(e) {
    return html `
    <mosaik-toolbar part="toolbar"
                    .dir="${e.dir}"
                    .lang="${e.lang}"
                    .appearance="${Appearance.Plain}">
        <mosaik-button-group>
        <mosaik-button slot="start"
                       .label="${'1x'}"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click=${() => e.zoom = 1}></mosaik-button>
        <mosaik-button slot="start"
                       .label="${'2x'}"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click=${() => e.zoom = 2}></mosaik-button>
        <mosaik-button slot="start"
                       .label="${'4x'}"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click=${() => e.zoom = 4}></mosaik-button>
        </mosaik-button-group>
        <mosaik-divider slot="start" .orientation="${Orientation.Vertical}"></mosaik-divider>
        <mosaik-button-group>
        <mosaik-button slot="start"
                       .label="${'Jetzt'}"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click=${() => e.scrollToNow(true)}></mosaik-button>
        </mosaik-button-group>
        <mosaik-divider slot="start"
                        .orientation="${Orientation.Vertical}"
                        .dir="${e.dir}"
                        .lang="${e.lang}"></mosaik-divider>
        <mosaik-button-group>
        <mosaik-button slot="start"
                       aria-label="Zoom in"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .icon="${Icons.zoomIn}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click="${() => e.zoomIn()}"></mosaik-button>
        <mosaik-button slot="start"
                       part="zoomOut"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .icon="${Icons.zoomOut}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click="${() => e.zoomOut()}"></mosaik-button>
        </mosaik-button-group>
        <mosaik-divider slot="start"
                        .orientation="${Orientation.Vertical}"
                        .dir="${e.dir}"
                        .lang="${e.lang}"></mosaik-divider>
        <mosaik-button slot="start"
                       aria-label="Previous day"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .icon="${Icons.chevronLeft}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click="${() => e.previousDate()}"></mosaik-button>
        <mosaik-datebox slot="start"
                        .appearance="${e.appearance}"
                        .variant="${e.variant}"
                        .value="${e.start}"
                        .dir="${e.dir}"
                        .lang="${e.lang}"></mosaik-datebox>
        <mosaik-button slot="start"
                       aria-label="Next day"
                       .appearance="${e.appearance}"
                       .variant="${e.variant}"
                       .icon="${Icons.chevronRight}"
                       .dir="${e.dir}"
                       .lang="${e.lang}"
                       @click="${() => e.nextDate()}"></mosaik-button>
        <slot name="toolbar"></slot>
        ${when(e.showFilter, () => html `
        <mosaik-textbox slot="end"
                        ara-label="Filter"
                        part="filter"
                        .isClearable="${true}"
                        .value="${live(e.filter)}"
                        .placeholder="${e.filterPlaceholder}"
                        .appearance="${e.appearance}"
                        .variant="${e.variant}"
                        .dir="${e.dir}"
                        .lang="${e.lang}"
                        @input="${(x) => e.filter = x.target.value}">
            <mosaik-icon slot="prefix"
                         .inline="${true}"
                         .data="${Icons.search}"
                         .dir="${e.dir}"
                         .lang="${e.lang}"></mosaik-icon>
        </mosaik-textbox>

        `)}
    </mosaik-toolbar>
    <div part="root">
        <div part="corner"></div>
        <div part="scroll"
             @scroll=${(x) => e.onScroll(x)}>

            <!-- Timeline Header (horizontal sync) -->
            <mosaik-epg-timeline part="timeline"
                                 .dayWidth=${e.totalWidth}
                                 .hourWidth=${e.zoom}
                                 .numberOfHoursInDay=${24}
                                 .offsetStartHoursRange=${0}
                                 .sidebarWidth=${100}
                                 .hasSidebar=${true}
                                 .format="${e.timelineFormat}"
                                 .locale="${e.locale}"
                                 .appearance="${e.appearance}"
                                 .variant="${e.variant}"
                                 .disabled="${e.disabled}"
                                 .dir="${e.dir}"
                                 .lang="${e.lang}"></mosaik-epg-timeline>
            <div part="channels">
                <slot name="channels"
                      @slotchange="${(x) => e.onSlotChange(x)}"></slot>
            </div>
            <div part="content"
                 style="width: ${e.totalWidth}px;">
                <slot @slotchange="${(x) => e.onSlotChange(x)}"></slot>
            </div>
        </div>
    </div>

    ${when(e.showMinimap, () => html `
    <mosaik-epg-minimap part="minimap"
                        .lanes=${e.children.length}
                        .visibleStart=${e.visibleStart}
                        .visibleEnd=${e.visibleEnd}
                        .channels=${e.items}
                        .dir="${e.dir}"
                        .lang="${e.lang}"
                        @jumpToRow=${(x) => e.onMinimapJump(x)}></mosaik-epg-minimap>
    `)}
  `;
}
//# sourceMappingURL=EpgElementTemplate.js.map