@if (request(); as pickerRequest) {
  <app-modal-backdrop
    [zIndex]="110"
    [ariaLabel]="'screenShare.sourcePicker.ariaClose' | translate"
    (dismissed)="cancel()"
  />

  <div class="fixed inset-0 z-[111] flex items-center justify-center p-4 pointer-events-none">
    <section
      appThemeNode="screenShareSourcePicker"
      class="pointer-events-auto w-full max-w-6xl rounded-2xl border border-border bg-card shadow-2xl"
      (click)="$event.stopPropagation()"
      (keydown.enter)="$event.stopPropagation()"
      (keydown.space)="$event.stopPropagation()"
      role="dialog"
      aria-modal="true"
      aria-labelledby="screen-share-source-picker-title"
      aria-describedby="screen-share-source-picker-description"
      tabindex="-1"
    >
      <header class="border-b border-border p-5">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <h2
              id="screen-share-source-picker-title"
              class="text-lg font-semibold text-foreground"
            >
              {{ 'screenShare.sourcePicker.title' | translate }}
            </h2>
            <p
              id="screen-share-source-picker-description"
              class="mt-1 text-sm text-muted-foreground"
            >
              {{ 'screenShare.sourcePicker.description' | translate }}
            </p>
          </div>

          <label
            class="flex items-center justify-between gap-3 rounded-xl border border-border bg-secondary/30 px-4 py-3 lg:min-w-80"
            for="screen-share-include-system-audio-toggle"
          >
            <div>
              <p class="text-sm font-medium text-foreground">{{ 'screenShare.sourcePicker.includeSystemAudio' | translate }}</p>
              <p class="text-xs text-muted-foreground">{{ 'screenShare.sourcePicker.includeSystemAudioDescription' | translate }}</p>
            </div>
            <span class="relative inline-flex items-center cursor-pointer">
              <input
                id="screen-share-include-system-audio-toggle"
                type="checkbox"
                class="sr-only peer"
                [checked]="includeSystemAudio()"
                (change)="onIncludeSystemAudioChange($event)"
              />
              <span
                class="relative block h-5 w-10 rounded-full bg-secondary transition-colors peer-checked:bg-primary after:absolute after:left-[2px] after:top-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-transform after:content-[''] peer-checked:after:translate-x-full"
              ></span>
            </span>
          </label>
        </div>

        <div
          class="mt-4 flex flex-wrap gap-2"
          role="tablist"
          [attr.aria-label]="'screenShare.sourcePicker.tabListAria' | translate"
        >
          <button
            type="button"
            class="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
            role="tab"
            [attr.aria-selected]="activeTab() === 'screen'"
            [disabled]="getTabCount('screen') === 0"
            [class.border-primary]="activeTab() === 'screen'"
            [class.bg-primary/10]="activeTab() === 'screen'"
            [class.text-primary]="activeTab() === 'screen'"
            [class.border-border]="activeTab() !== 'screen'"
            [class.bg-secondary/30]="activeTab() !== 'screen'"
            [class.text-foreground]="activeTab() !== 'screen'"
            (click)="setActiveTab('screen')"
          >
            {{ 'screenShare.sourcePicker.entireScreen' | translate }}
            <span class="rounded-full bg-black/10 px-2 py-0.5 text-xs text-current">
              {{ getTabCount('screen') }}
            </span>
          </button>

          <button
            type="button"
            class="inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
            role="tab"
            [attr.aria-selected]="activeTab() === 'window'"
            [disabled]="getTabCount('window') === 0"
            [class.border-primary]="activeTab() === 'window'"
            [class.bg-primary/10]="activeTab() === 'window'"
            [class.text-primary]="activeTab() === 'window'"
            [class.border-border]="activeTab() !== 'window'"
            [class.bg-secondary/30]="activeTab() !== 'window'"
            [class.text-foreground]="activeTab() !== 'window'"
            (click)="setActiveTab('window')"
          >
            {{ 'screenShare.sourcePicker.windows' | translate }}
            <span class="rounded-full bg-black/10 px-2 py-0.5 text-xs text-current">
              {{ getTabCount('window') }}
            </span>
          </button>
        </div>

        @if (includeSystemAudio()) {
          <p class="mt-3 rounded-lg bg-primary/10 px-3 py-2 text-xs text-primary">
            {{ 'screenShare.sourcePicker.systemAudioNote' | translate }}
          </p>
        }
      </header>

      <div class="screen-share-source-picker__body">
        @if (filteredSources().length > 0) {
          <div
            class="screen-share-source-picker__grid"
            [class.screen-share-source-picker__grid--screen]="activeTab() === 'screen'"
            [class.screen-share-source-picker__grid--window]="activeTab() === 'window'"
          >
            @for (source of filteredSources(); track trackSource($index, source)) {
              <button
                #sourceButton
                appThemeNode="screenShareSourceCard"
                type="button"
                class="rounded-xl border px-4 py-4 text-left transition-colors screen-share-source-picker__source"
                [attr.aria-pressed]="selectedSourceId() === source.id"
                [attr.data-source-id]="source.id"
                [class.border-primary]="selectedSourceId() === source.id"
                [class.bg-primary/10]="selectedSourceId() === source.id"
                [class.text-primary]="selectedSourceId() === source.id"
                [class.border-border]="selectedSourceId() !== source.id"
                [class.bg-secondary/30]="selectedSourceId() !== source.id"
                [class.text-foreground]="selectedSourceId() !== source.id"
                (click)="selectSource(source.id)"
              >
                <div class="flex items-start justify-between gap-3">
                  <div class="min-w-0 flex-1">
                    <span class="screen-share-source-picker__preview">
                      <img
                        [ngSrc]="source.thumbnail"
                        [alt]="source.name"
                        fill
                      />
                    </span>

                    <p class="mt-3 truncate font-medium">{{ source.name }}</p>
                    <p class="mt-1 text-sm text-muted-foreground">
                      {{ sourceKindLabel(source.kind) }}
                    </p>
                  </div>

                  <span
                    class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border text-[10px]"
                    [class.border-primary]="selectedSourceId() === source.id"
                    [class.bg-primary]="selectedSourceId() === source.id"
                    [class.text-primary-foreground]="selectedSourceId() === source.id"
                    [class.border-border]="selectedSourceId() !== source.id"
                  >
                    @if (selectedSourceId() === source.id) {
                      ✓
                    }
                  </span>
                </div>
              </button>
            }
          </div>
        } @else {
          <div class="flex min-h-52 items-center justify-center px-5 py-8 text-center">
            <div>
              <p class="text-sm font-medium text-foreground">{{ emptyStateTitle() }}</p>
              <p class="mt-1 text-sm text-muted-foreground">
                {{ emptyStateDescription() }}
              </p>
            </div>
          </div>
        }
      </div>

      <footer class="flex items-center justify-end gap-2 border-t border-border p-4">
        <button
          type="button"
          class="rounded-lg bg-secondary px-4 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
          (click)="cancel()"
        >
          {{ 'common.cancel' | translate }}
        </button>
        <button
          type="button"
          class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
          [disabled]="!selectedSourceId()"
          (click)="confirmSelection()"
        >
          {{ 'screenShare.sourcePicker.startSharing' | translate }}
        </button>
      </footer>
    </section>
  </div>
}