@if (open()) {
  <div class="fixed inset-0 z-[var(--z-modal)] flex flex-col justify-end">
    <div class="absolute inset-0 bg-black/50 animate-fade-in" (click)="close()"></div>
    <div class="relative rounded-t-2xl bg-surface pb-[env(safe-area-inset-bottom)] animate-slide-up">
      <!-- 标题 + 完成 -->
      <div class="flex items-center justify-between px-4 py-3">
        <span class="text-[15px] font-medium text-ink">级联选择</span>
        <button type="button" class="h-11 px-2 -mr-2 text-[15px] text-primary" (click)="confirm()">
          {{ confirmText() }}
        </button>
      </div>

      <!-- 路径标签 -->
      <div class="flex items-center gap-2 overflow-x-auto border-t border-edge px-4 py-2.5">
        <button
          type="button"
          class="shrink-0 rounded-full px-3 py-1 text-xs transition-colors"
          [class.bg-primary-subtle]="path().length === 0"
          [class.text-primary]="path().length === 0"
          [class.bg-surface-2]="path().length > 0"
          [class.text-muted]="path().length > 0"
          (click)="backTo(0)"
        >
          {{ placeholder() }}
        </button>
        @for (p of path(); track $index; let i = $index) {
          <i class="fa-solid fa-chevron-right shrink-0 text-[9px] text-faint" aria-hidden="true"></i>
          <button
            type="button"
            class="shrink-0 rounded-full px-3 py-1 text-xs transition-colors"
            [class.bg-primary-subtle]="i === path().length - 1"
            [class.text-primary]="i === path().length - 1"
            [class.bg-surface-2]="i !== path().length - 1"
            [class.text-muted]="i !== path().length - 1"
            (click)="backTo(i + 1)"
          >
            {{ p.label }}
          </button>
        }
      </div>

      <!-- 当前层级选项 -->
      <div class="max-h-72 overflow-y-auto py-1">
        @for (level of [0, 1, 2, 3]; track level) {
          @if (path().length === level && levelOptions(level).length > 0) {
            @for (opt of levelOptions(level); track opt.label) {
              <button
                type="button"
                class="flex h-12 w-full items-center justify-between px-4 text-sm transition-colors"
                [class.text-primary]="isActive(level, opt)"
                [class.text-ink-2]="!isActive(level, opt)"
                [class.font-medium]="isActive(level, opt)"
                [class.bg-primary-subtle]="isActive(level, opt)"
                [class.opacity-40]="opt.disabled"
                [disabled]="opt.disabled"
                (click)="select(level, opt)"
              >
                {{ opt.label }}
                @if (opt.children?.length) {
                  <i class="fa-solid fa-chevron-right text-xs text-faint" aria-hidden="true"></i>
                }
              </button>
            }
          }
        }
      </div>
    </div>
  </div>
}