<section
  aria-roledescription="carousel"
  [attr.aria-label]="label"
  [ngStyle]="{ minHeight: minHeight ?? undefined }"
  class="tw-flex tw-flex-col"
  #container
>
  <vault-carousel-content [content]="slides.get(selectedIndex)?.content"></vault-carousel-content>
  <div class="tw-w-full tw-flex tw-justify-between tw-mt-auto tw-px-4 tw-pb-2 tw-pt-4">
    <span class="tw-size-6">
      @if (!hideArrows()) {
        <button
          type="button"
          bitIconButton="bwi-angle-left"
          class="tw-size-6 tw-p-0 tw-flex tw-items-center tw-justify-center"
          size="small"
          (click)="prevSlide()"
          [disabled]="selectedIndex <= 0"
          label="{{ 'back' | i18n }}"
        ></button>
      }
    </span>
    <div
      class="tw-w-full tw-flex tw-gap-2 tw-justify-center tw-mt-auto"
      role="tablist"
      (keydown)="keyManager.onKeydown($event)"
      #carouselButtonWrapper
    >
      @for (slide of slides; track $index; let i = $index) {
        <vault-carousel-button
          [slide]="slide"
          [isActive]="i === selectedIndex"
          (onClick)="selectSlide(i)"
        ></vault-carousel-button>
      }
    </div>
    <span class="tw-size-6">
      @if (!hideArrows()) {
        <button
          type="button"
          bitIconButton="bwi-angle-right"
          class="tw-size-6 tw-p-0 tw-flex tw-items-center tw-justify-center"
          size="small"
          (click)="nextSlide()"
          [disabled]="selectedIndex >= slides.length - 1"
          label="{{ 'next' | i18n }}"
        ></button>
      }
    </span>
  </div>
  <ng-content select="[carouselActions]"></ng-content>
  @if (minHeight === null) {
    <div class="tw-absolute tw-invisible" #tempSlideContainer>
      <ng-template cdkPortalOutlet></ng-template>
    </div>
  }
</section>
