<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">
    <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>
    <div
      class="tw-w-full tw-flex tw-gap-2 tw-justify-center tw-mt-auto"
      role="tablist"
      (keydown)="keyManager.onKeydown($event)"
      #carouselButtonWrapper
    >
      <vault-carousel-button
        *ngFor="let slide of slides; let i = index"
        [slide]="slide"
        [isActive]="i === selectedIndex"
        (onClick)="selectSlide(i)"
      ></vault-carousel-button>
    </div>
    <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>
  </div>
  <div class="tw-absolute tw-invisible" #tempSlideContainer *ngIf="minHeight === null">
    <ng-template cdkPortalOutlet></ng-template>
  </div>
</section>
