@if (open()) {
  <div class="command-palette-overlay">
    <div class="command-palette-scrim" aria-hidden="true"></div>
    <div
      #dialog
      class="command-palette-dialog glass-surface"
      role="dialog"
      aria-modal="true"
      [id]="dialogId"
      [attr.aria-labelledby]="titleId"
      [attr.aria-describedby]="descriptionId"
      (keydown)="onDialogKeydown($event, dialog)"
    >
      <div class="command-palette-header">
        <div>
          <h2 [id]="titleId" class="command-palette-title">{{ copy().dialogTitle }}</h2>
          <p [id]="descriptionId" class="command-palette-description">
            {{ copy().dialogDescription }}
          </p>
        </div>
        <button type="button" class="command-palette-close" (click)="closePalette()">
          {{ copy().closeLabel }}
        </button>
      </div>

      <form class="command-palette-form" (submit)="onSubmit($event)">
        <label [attr.for]="inputId">{{ copy().inputLabel }}</label>
        <input
          #commandInput
          [id]="inputId"
          type="text"
          autocomplete="off"
          autocapitalize="off"
          spellcheck="false"
          [attr.placeholder]="copy().inputPlaceholder"
          [value]="query()"
          (input)="onQueryInput($event)"
        />

        <p class="command-palette-kicker" [id]="suggestionsId">{{ copy().suggestionsLabel }}</p>
        @if (suggestions().length === 0) {
          <p class="command-palette-empty">{{ copy().emptySuggestions }}</p>
        } @else {
          <ul class="command-palette-suggestions" [attr.aria-labelledby]="suggestionsId">
            @for (command of suggestions(); track command.id) {
              <li>
                <button type="button" (click)="runDefinition(command)">
                  <span>{{ command.input }}</span>
                  <span>{{ copy().commandDescriptions[command.id] }}</span>
                </button>
              </li>
            }
          </ul>
        }
      </form>

      <div
        class="command-palette-output"
        role="log"
        aria-live="polite"
        aria-atomic="false"
        [attr.aria-label]="copy().outputLabel"
      >
        <ul>
          @for (line of output(); track line.id) {
            <li>{{ line.text }}</li>
          }
        </ul>
      </div>
    </div>
  </div>
}