@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)="open.set(false)"></div>
    <div class="relative max-h-[80vh] overflow-hidden rounded-t-2xl bg-surface pb-[env(safe-area-inset-bottom)] animate-slide-up">
      <!-- 商品信息 -->
      <div class="flex gap-3 border-b border-edge p-4">
        <div class="h-20 w-20 shrink-0 overflow-hidden rounded-lg border border-edge bg-surface-2">
          @if (goods().image) {
            <img [src]="goods().image" alt="" class="h-full w-full object-cover" />
          } @else {
            <div class="flex h-full items-center justify-center">
              <i class="fa-solid fa-image text-lg text-faint/50" aria-hidden="true"></i>
            </div>
          }
        </div>
        <div class="min-w-0 flex-1">
          <p class="leading-none"><ui-m-price [price]="goods().price" /></p>
          <p class="mt-1.5 line-clamp-2 text-[13px] leading-snug text-ink">{{ goods().title }}</p>
          @if (goods().stock != null) {
            <p class="mt-0.5 text-[11px] text-faint">库存 {{ goods().stock }} 件</p>
          }
        </div>
        <button
          type="button"
          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-2 text-muted transition-colors active:bg-surface-active"
          (click)="open.set(false)"
          aria-label="关闭"
        >
          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </button>
      </div>

      <!-- 规格选择 -->
      <div class="max-h-[38vh] overflow-y-auto px-4 py-3">
        @for (spec of specs(); track spec.name) {
          <div class="mb-4 last:mb-0">
            <p class="mb-2 text-sm text-ink-2">{{ spec.name }}</p>
            <div class="flex flex-wrap gap-2">
              @for (opt of spec.options; track opt.label) {
                <ui-m-button
                  size="small"
                  [variant]="isActive(spec, opt.value) ? 'primary' : 'secondary'"
                  [disabled]="opt.disabled"
                  (click)="toggle(spec, opt.value)"
                >
                  {{ opt.label }}
                </ui-m-button>
              }
            </div>
          </div>
        }

        <!-- 数量 -->
        <div class="flex items-center justify-between">
          <span class="text-sm text-ink-2">购买数量</span>
          <ui-m-stepper [(value)]="count" [min]="1" [disableInput]="true" />
        </div>
      </div>

      <!-- 确认栏 -->
      <div class="border-t border-edge px-4 py-3">
        <ui-m-button
          [block]="true"
          [disabled]="!allSelected()"
          (click)="onConfirm()"
        >
          {{ allSelected() ? '确认' : '请选择规格' }}
        </ui-m-button>
      </div>
    </div>
  </div>
}