// #region Imports
import { html } from '../../../../Dom/Html';
import { repeat } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `Carousel2Element`.
 *
 * @public
 */
export function carousel2ElementTemplate(e) {
    /*
    ${repeat(e.value, (x, index) => html`
                  <div class="p-carousel-item"
                       aria-hidden="${e._totalShiftedItems * -1 !== index}"
                       aria-label="${e.ariaSlideNumber(index)}"
                       aria-roledescription="${e.ariaSlideLabel()}">
                      <slot name="item" .item="${item}"></slot>
                  </div>
                  `)}
    */
    return html `
      <div id="carousel"
           class="p-carousel p-component ${e.orientation}"
           role="region">
        <!-- Header -->
        <div class="p-carousel-header"
             ?hidden="${!e.hasSlot('header')}">
          <slot name="header"></slot>
        </div>
        <!-- Content -->
        <div part="content" class="p-carousel-content">
          <div class="p-carousel-container"
               aria-live="${e.autoplayInterval ? 'polite' : 'off'}">
            <button type="button"
                    class="p-carousel-prev p-link"
                    @click="${e.navBackward}"
                    ?disabled="${e.isBackwardNavDisabled()}"
                    aria-label="${e.ariaPrevButtonLabel()}">
              <slot name="previous-icon">
                ${e.isVertical() ? html `<span class="chevron-up-icon"></span>` : html `<span class="chevron-left-icon"></span>`}
              </slot>
            </button>
            <div class="p-carousel-items-content"
                 style="height: ${e.isVertical() ? 'e.verticalViewPortHeight' : 'auto'}">
              <div class="p-carousel-items-container"
                   @transitionend="${e.onTransitionEnd}">
                <slot></slot>
                <!--  -->
              </div>
            </div>
            <button type="button"
              class="p-carousel-next p-link"
              @click="${e.navForward}"
              ?disabled="${e.isForwardNavDisabled()}"
              aria-label="${e.ariaNextButtonLabel()}">
              <slot name="next-icon">
                ${e.isVertical() ? html `<span class="chevron-down-icon"></span>` : html `<span class="chevron-right-icon"></span>`}
              </slot>
            </button>
          </div>
        </div>
        <!-- Indicators -->
        <ul part="indicators"
            class="p-carousel-indicators p-reset">
          ${repeat([].constructor(e.totalDots()), (_, i) => html `
          <li class="p-carousel-indicator ${e.page === i ? 'p-highlight' : ''}">
            <button type="button"
                    class="p-link"
                    @click="${() => e.onDotClick(i)}"
                    aria-label="${e.ariaPageLabel(i + 1)}"
                    aria-current="${e.page === i ? 'page' : 'false'}"
                    tabindex="${e.page === i ? 0 : -1}"></button>
          </li>
          `)}
        </ul>
        <!-- Footer -->
        <div class="p-carousel-footer" ?hidden="${!e.hasSlot('footer')}">
          <slot name="footer"></slot>
        </div>
      </div>
    `;
}
//# sourceMappingURL=Carousel2ElementTemplate.js.map