@if (commands().length > 0) {
  <div
    class="overflow-hidden rounded-2xl border border-border bg-card/95 shadow-2xl shadow-black/30 backdrop-blur-xl"
    role="listbox"
    [attr.aria-label]="'chat.slashCommand.ariaLabel' | translate"
  >
    <div class="flex items-center justify-between border-b border-border/60 px-4 py-2">
      <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">{{ 'chat.slashCommand.commands' | translate }}</span>
      <span class="text-[11px] text-muted-foreground">{{ commands().length }}</span>
    </div>

    <div class="max-h-72 overflow-y-auto py-1">
      @for (entry of commands(); track entry.id; let index = $index) {
        <button
          type="button"
          role="option"
          [attr.aria-selected]="index === activeIndex()"
          [attr.data-slash-active]="index === activeIndex()"
          class="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors"
          [class.bg-secondary]="index === activeIndex()"
          (mouseenter)="hover(index)"
          (mousedown)="$event.preventDefault(); pick(entry)"
        >
          <span
            class="grid h-9 w-9 shrink-0 place-items-center rounded-xl border border-border/70 bg-secondary/60 text-sm font-semibold text-foreground"
          >
            {{ badgeLabel(entry) }}
          </span>

          <span class="min-w-0 flex-1">
            <span class="flex items-baseline gap-2">
              <span class="truncate font-semibold text-foreground">/{{ entry.contribution.name }}</span>
              @if (usage(entry)) {
                <span class="truncate font-mono text-xs text-muted-foreground">{{ usage(entry) }}</span>
              }
            </span>
            @if (entry.contribution.description) {
              <span class="mt-0.5 block truncate text-xs text-muted-foreground">{{ entry.contribution.description }}</span>
            }
          </span>

          <span
            class="hidden shrink-0 rounded-full border border-border/60 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-muted-foreground sm:inline"
          >
            {{ entry.pluginId }}
          </span>
        </button>
      }
    </div>
  </div>
}