@if (items().length > 0) {
  <div
    class="relative w-full select-none overflow-hidden rounded-xl border border-edge bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
    role="region"
    [attr.aria-roledescription]="'轮播'"
    aria-label="轮播图"
    tabindex="0"
    (keydown)="onKeydown($event)"
    (mouseenter)="stopAutoplay()"
    (mouseleave)="restartAutoplay()"
  >
    <!-- 滑动轨道(loop 模式含首尾克隆,实现无缝循环) -->
    <div
      class="ui-carousel-track flex h-64"
      [class.ui-carousel-track--instant]="noTransition()"
      [style.transform]="trackTransform()"
      (transitionend)="onTransitionEnd()"
    >
      @for (item of slides(); track $index; let i = $index) {
        <div
          class="relative h-full w-full shrink-0"
          role="group"
          [attr.aria-hidden]="i !== position()"
        >
          @if (itemImage(item)) {
            <img [src]="itemImage(item)" alt="" class="h-full w-full object-cover" draggable="false" />
            @if (itemTitle(item) || itemContent(item)) {
              <div
                class="absolute inset-x-0 bottom-0 px-6 pb-5 pt-12 text-white"
                style="background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);"
              >
                @if (itemTitle(item)) {
                  <div class="text-base font-semibold">{{ itemTitle(item) }}</div>
                }
                @if (itemContent(item)) {
                  <div class="mt-1 text-sm text-white/80">{{ itemContent(item) }}</div>
                }
              </div>
            }
          } @else {
            <div
              class="flex h-full w-full flex-col items-center justify-center gap-2 px-8 text-center text-white"
              [style.background]="itemBackground(item)"
            >
              @if (itemTitle(item)) {
                <div class="text-xl font-semibold">{{ itemTitle(item) }}</div>
              }
              @if (itemContent(item)) {
                <div class="max-w-md text-sm text-white/85">{{ itemContent(item) }}</div>
              }
            </div>
          }
        </div>
      }
    </div>

    <!-- 左右切换 -->
    @if (showArrows() && items().length > 1) {
      <button
        type="button"
        class="absolute left-3 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-surface/90 text-ink shadow-soft transition-colors hover:bg-surface-2 disabled:pointer-events-none disabled:opacity-40"
        (click)="prev()"
        [disabled]="!canPrev()"
        aria-label="上一张"
      >
        <i class="fa-solid fa-chevron-left text-sm" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="absolute right-3 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-surface/90 text-ink shadow-soft transition-colors hover:bg-surface-2 disabled:pointer-events-none disabled:opacity-40"
        (click)="next()"
        [disabled]="!canNext()"
        aria-label="下一张"
      >
        <i class="fa-solid fa-chevron-right text-sm" aria-hidden="true"></i>
      </button>
    }

    <!-- 指示器 -->
    @if (showIndicators() && items().length > 1) {
      <div class="absolute inset-x-0 bottom-3 flex items-center justify-center gap-2">
        @for (item of items(); track $index; let i = $index) {
          <button
            type="button"
            [class]="i === activeIndex() ? 'h-2 w-6 rounded-full bg-white transition-all duration-200' : 'h-2 w-2 rounded-full bg-white/50 transition-all duration-200'"
            (click)="goTo(i)"
            [attr.aria-label]="'跳转到第 ' + (i + 1) + ' 张'"
            [attr.aria-current]="i === activeIndex() ? 'true' : null"
          ></button>
        }
      </div>
    }
  </div>
} @else {
  <div
    class="flex h-40 w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-edge bg-surface-2 text-muted"
  >
    <i class="fa-solid fa-image text-xl text-faint" aria-hidden="true"></i>
    <span class="text-sm">暂无轮播内容</span>
  </div>
}