/* eslint-disable lit/prefer-static-styles */
// #region Imports
import { repeat } from '../../../Directives/Directives';
import { html } from '../../../../Dom/Html';
import { createTimeOfToday } from './Utils';
import { TimeFormatter } from '../../../../Intl/Formatters/TimeFormatter';
// #endregion
/**
 * The template of the {@link EpgTimelineElement}.
 *
 * @public
 */
export function epgTimelineElementTemplate(e) {
    return html `
        <style>
            :host {
                --epg-timeline-start-position: ${e.sidebarWidth}px;
                --epg-day-width: ${e.dayWidth}px;
                --epg-hour-width: ${e.hourWidth}px;
            }
        </style>
        ${repeat([].constructor(e.numberOfHoursInDay), (_, i) => html `
        <div part="container">
            <span part="label">
                <mosaik-text .dir="${e.dir}"
                             .lang="${e.lang}"
                             .text="${TimeFormatter.format(createTimeOfToday(i + e.offsetStartHoursRange), e.format, e.locale)}"></mosaik-text>
            </span>
            <div part="dividers">
                ${repeat([].constructor(4), () => html `
                    <div part="divider"></div>
                `)}
            </div>
        </div>
        `)}
    `;
}
//# sourceMappingURL=EpgTimelineElementTemplate.js.map