// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `ThumbnailElement`.
 *
 * @public
 */
export function thumbnailElementTemplate(e) {
    const toPreview = (preview) => {
        return preview;
    };
    return html `
        ${when(e.kind === 'image', () => html `
        <mosaik-image part="media image"
                      .src="${toPreview(e.preview)?.url ?? ''}"
                      .alt="${toPreview(e.preview)?.alt ?? ''}"
                      .width="${'100%'}"
                      .height="${'100%'}"></mosaik-image>
        `)}
        ${when(e.kind === 'video', () => html `
        <mosaik-video part="media video"
                      .src="${toPreview(e.preview)?.url ?? ''}"
                      .poster="${toPreview(e.preview)?.poster ?? ''}"
                      .autoPlay="${false}"
                      .muted="${false}"
                      .loop="${false}"
                      .showControls="${false}"
                      .width="${'100%'}"
                      .height="${'100%'}"></mosaik-video>
        `)}
        ${when(e.kind === 'audio', () => html `
        <mosaik-audio part="media audio"
                      .src="${toPreview(e.preview)?.url ?? ''}"
                      .autoPlay="${false}"
                      .muted="${false}"
                      .loop="${false}"
                      .showControls="${false}"
                      .width="${'100%'}"
                      .height="${'100%'}"></mosaik-audio>
        `)}
        ${when(e.kind === 'map', () => html `
        <mosaik-map part="media map"
                    .latitude="${toPreview(e.preview)?.latitude ?? 0}"
                    .longitude="${toPreview(e.preview)?.longitude ?? 0}"
                    .zoom="${toPreview(e.preview)?.zoom ?? 0}"
                    .provider="${toPreview(e.preview)?.provider ?? 'default'}"
                    .label="${toPreview(e.preview)?.label ?? ''}"
                    .width="${'100%'}"
                    .height="${'100%'}"></mosaik-map>
        `)}
        ${when(e.kind === 'other', () => html `
            <span part="media other"></span>
        `)}
    `;
}
//# sourceMappingURL=ThumbnailElementTemplate.js.map