// #region Imports
import { repeat, when } from '../../../../Controls/Directives/Directives';
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { Appearance } from '../../../Types/Appearance';
import { Variant } from '../../../Types/Variant';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the {@link PaginatorElement}.
 *
 * @public
 */
export function paginatorElementTemplate(e) {
    return html `
        <mosaik-stack .gap="${'8px'}"
                      .verticalAlignment="${VerticalAlignment.Center}">
            <mosaik-button part="first"
                           .icon="${'M6 3a1 1 0 0 0-.993.883L5 4v16a1 1 0 0 0 1.993.117L7 20V4a1 1 0 0 0-1-1Zm12.707.293a1 1 0 0 0-1.32-.083l-.094.083-8 8a1 1 0 0 0-.083 1.32l.083.094 8 8a1 1 0 0 0 1.497-1.32l-.083-.094L11.414 12l7.293-7.293a1 1 0 0 0 0-1.414Z'}"
                           .appearance="${e.appearance}"
                           .variant="${e.variant}"></mosaik-button>
            <mosaik-button part="previous"
                           .icon="${Icons.chevronLeft}"
                           .appearance="${e.appearance}"
                           .variant="${e.variant}"></mosaik-button>
            <mosaik-stack>
                ${repeat(e.calculatePages(e.total, e.size), (x) => x, (x) => html `
                <mosaik-button part="page"
                               .label="${x.toString()}"
                               .appearance="${Appearance.Plain}"
                               .variant="${Variant.Default}"></mosaik-button>
                `)}
            </mosaik-stack>
            <mosaik-button part="next"
                           .icon="${Icons.chevronRight}"
                           .appearance="${e.appearance}"
                           .variant="${e.variant}"></mosaik-button>
            <mosaik-button part="last"
                           .icon="${'M18 3a1 1 0 0 1 .993.883L19 4v16a1 1 0 0 1-1.993.117L17 20V4a1 1 0 0 1 1-1Zm-12.707.293a1 1 0 0 1 1.32-.083l.094.083 8 8a1 1 0 0 1 .083 1.32l-.083.094-8 8a1 1 0 0 1-1.497-1.32l.083-.094L12.586 12 5.293 4.707a1 1 0 0 1 0-1.414Z'}"
                           .appearance="${e.appearance}"
                           .variant="${e.variant}"></mosaik-button>

            ${when(e.showSizes, () => html `
            <mosaik-stack>
                <mosaik-select .appearance="${e.appearance}">
                    ${repeat(e.sizes, (x) => x, (x) => html `
                    <mosaik-select-item .value="${x.toString()}"></mosaik-select-item>
                    `)}
                </mosaik-select>
            </mosaik-stack>
            `)}
        </mosaik-stack>
        <mosaik-stack>
            <mosaik-text .text="${'1-10 of 100'}"></mosaik-text>
        </mosaik-stack>
    `;
}
//# sourceMappingURL=PaginatorElementTemplate.js.map