@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 rounded-t-2xl bg-surface pb-[env(safe-area-inset-bottom)] animate-slide-up">
      <p class="py-3.5 text-center text-sm text-muted">{{ title() }}</p>

      <div class="grid grid-cols-4 gap-y-4 px-4 pb-4">
        @for (opt of options(); track opt.name) {
          <button type="button" class="flex flex-col items-center gap-1.5" (click)="onSelect(opt)">
            <span class="flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-lg text-primary transition-transform active:scale-90">
              <i [class]="opt.icon" aria-hidden="true"></i>
            </span>
            <span class="text-xs text-ink-2">{{ opt.name }}</span>
            @if (opt.description) {
              <span class="text-[10px] text-faint">{{ opt.description }}</span>
            }
          </button>
        }
      </div>

      <div class="px-2 pb-2">
        <button
          type="button"
          class="h-11 w-full rounded-lg bg-surface-2 text-sm font-medium text-ink transition-colors active:bg-surface-active"
          (click)="open.set(false)"
        >
          {{ cancelText() }}
        </button>
      </div>
    </div>
  </div>
}