// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link BannerGroupElement}.
 *
 * @public
 */
export function bannerGroupElementTemplate(e) {
    // Using public API instead of private collection access
    const length = e.length;
    const isPager = e.maxLength === 1;
    return html `
    <div part="root"
         role="region"
         aria-roledescription="${isPager ? 'carousel' : 'stack'}"
         tabindex="0">
            <div part="viewport" class="viewport">
                <slot></slot>
            </div>
            ${when(isPager && length > 1, () => html `
            <div part="control-prev" class="controls prev">
                <slot name="prev">
                    <button type="button"
                            ?disabled="${e.disabled || !e.canPrev}"
                            aria-label="Previous banner"
                            @click="${() => e.previous()}">◀</button>
                </slot>
            </div>
            <div part="control-next" class="controls next">
                <slot name="next">
                    <button type="button"
                            ?disabled="${e.disabled || !e.canNext}"
                            aria-label="Next banner"
                            @click="${() => e.next()}">▶</button>
                </slot>
            </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=BannerGroupElementTemplate.js.map