<!-- Semmet Angular: Carousel — https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> and <%= classify(name) %>Slide in that parent component.

<<%= selector %> label="Featured items">
  <ng-template <%= camelize(name) %>Slide id="intro" label="Introduction">
    <app-intro-slide />
  </ng-template>

  <ng-template <%= camelize(name) %>Slide id="summary" label="Summary">
    <app-summary-slide [userId]="userId()" (selected)="selectSummary()" />
  </ng-template>
</<%= selector %>>

Set [preserveContent]="false" on <<%= selector %>> to destroy inactive slide content.
-->
<section aria-roledescription="carousel" [attr.aria-label]="label()">
  <button type="button" [disabled]="slides().length <= 1" (click)="previous()" [attr.aria-label]="previousLabel()">‹</button>
  <div aria-live="polite">
    @for (slide of slides(); track slide.id(); let i = $index) {
      <div
        aria-roledescription="slide"
        [attr.aria-label]="slideLabel(i, slide)"
        [hidden]="!isActive(i)"
      >
        @if (shouldRender(slide)) {
          <ng-container [ngTemplateOutlet]="slide.templateRef" />
        }
      </div>
    }
  </div>
  <button type="button" [disabled]="slides().length <= 1" (click)="next()" [attr.aria-label]="nextLabel()">›</button>
</section>
