@if (orientation() === 'vertical') {
  <ol class="flex flex-col">
    @for (item of items(); track $index; let last = $last) {
      <li class="relative flex gap-4 pb-8 last:pb-0">
        <!-- 圆点 + 左侧轴线 -->
        <div class="flex flex-col items-center">
          <div class="relative">
            <div [class]="dotClasses(item)">
              @if (item.icon) {
                <i [class]="item.icon + ' text-sm'" aria-hidden="true"></i>
              } @else {
                <i [class]="statusIcon(item)" aria-hidden="true"></i>
              }
            </div>
            @if (isActive(item)) {
              <span class="ui-timeline-pulse" aria-hidden="true"></span>
            }
          </div>
          @if (!last) {
            <div
              class="my-1 w-0.5 flex-1 rounded-full"
              [class.bg-primary]="isFilled(item)"
              [class.bg-edge]="!isFilled(item)"
            ></div>
          }
        </div>
        <!-- 内容 -->
        <div class="min-w-0 flex-1 pb-1 pt-1">
          @if (item.time) {
            <div class="text-xs text-muted">{{ item.time }}</div>
          }
          <div class="mt-0.5 text-sm font-semibold text-ink">{{ item.label }}</div>
          @if (item.content) {
            <div class="mt-1 text-sm leading-relaxed text-muted">{{ item.content }}</div>
          }
        </div>
      </li>
    }
  </ol>
} @else {
  <ol class="flex w-full">
    @for (item of items(); track $index; let first = $first, last = $last) {
      <li class="flex flex-1 flex-col items-center">
        <!-- 顶部轴线 + 圆点 -->
        <div class="flex w-full items-center">
          <div
            class="h-0.5 flex-1 rounded-full"
            [class.bg-primary]="isFilled(item)"
            [class.bg-edge]="!isFilled(item)"
            [class.opacity-0]="first"
          ></div>
          <div class="relative">
            <div [class]="dotClasses(item)">
              @if (item.icon) {
                <i [class]="item.icon + ' text-sm'" aria-hidden="true"></i>
              } @else {
                <i [class]="statusIcon(item)" aria-hidden="true"></i>
              }
            </div>
            @if (isActive(item)) {
              <span class="ui-timeline-pulse" aria-hidden="true"></span>
            }
          </div>
          <div class="h-0.5 flex-1 rounded-full bg-edge" [class.opacity-0]="last"></div>
        </div>
        <!-- 内容 -->
        <div class="mt-3 max-w-44 text-center">
          @if (item.time) {
            <div class="text-xs text-muted">{{ item.time }}</div>
          }
          <div class="mt-0.5 text-sm font-semibold text-ink">{{ item.label }}</div>
          @if (item.content) {
            <div class="mt-1 text-xs leading-relaxed text-muted">{{ item.content }}</div>
          }
        </div>
      </li>
    }
  </ol>
}