@if (orientation() === 'horizontal') {
  <ol class="flex w-full items-start">
    @for (step of steps(); track $index; let i = $index) {
      <li class="flex flex-1 flex-col items-center last:flex-none">
        <div class="flex w-full items-center">
          <div [class]="lineClasses(i, 'left')"></div>
          <button
            type="button"
            [class]="circleClasses(i)"
            [disabled]="!clickable()"
            (click)="select(i)"
            [attr.aria-label]="'第 ' + (i + 1) + ' 步: ' + step.label"
          >
            @if (isCompleted(i)) {
              <i class="fa-solid fa-check text-sm" aria-hidden="true"></i>
            } @else if (step.icon) {
              <i [class]="step.icon" aria-hidden="true"></i>
            } @else {
              <span class="text-sm font-semibold">{{ i + 1 }}</span>
            }
          </button>
          <div [class]="lineClasses(i, 'right')"></div>
        </div>
        <div class="mt-2 max-w-40 text-center">
          <div [class]="labelClasses(i)">{{ step.label }}</div>
          @if (step.description) {
            <div class="mt-0.5 text-xs text-muted">{{ step.description }}</div>
          }
        </div>
      </li>
    }
  </ol>
} @else {
  <ol class="flex flex-col">
    @for (step of steps(); track $index; let i = $index) {
      <li class="flex items-stretch gap-3">
        <div class="flex flex-col items-center">
          <button
            type="button"
            [class]="circleClasses(i)"
            [disabled]="!clickable()"
            (click)="select(i)"
            [attr.aria-label]="'第 ' + (i + 1) + ' 步: ' + step.label"
          >
            @if (isCompleted(i)) {
              <i class="fa-solid fa-check text-sm" aria-hidden="true"></i>
            } @else if (step.icon) {
              <i [class]="step.icon" aria-hidden="true"></i>
            } @else {
              <span class="text-sm font-semibold">{{ i + 1 }}</span>
            }
          </button>
          @if (!$last) {
            <div
              class="w-0.5 flex-1 rounded-full"
              [class.bg-primary]="isCompleted(i)"
              [class.bg-edge]="!isCompleted(i)"
            ></div>
          }
        </div>
        <div class="pb-8 pt-1.5">
          <div [class]="labelClasses(i)">{{ step.label }}</div>
          @if (step.description) {
            <div class="mt-0.5 text-xs text-muted">{{ step.description }}</div>
          }
        </div>
      </li>
    }
  </ol>
}