@if (request(); as pickerRequest) {
  <div
    class="fixed inset-0 z-[110] bg-black/70 backdrop-blur-sm"
    (click)="cancel()"
    (keydown.enter)="cancel()"
    (keydown.space)="cancel()"
    role="button"
    tabindex="0"
    aria-label="Close source picker"
  ></div>

  <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"
            >
              Choose what to share
            </h2>
            <p
              id="screen-share-source-picker-description"
              class="mt-1 text-sm text-muted-foreground"
            >
              Select a screen or window to start sharing.
            </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">Include system audio</p>
              <p class="text-xs text-muted-foreground">Share desktop sound with viewers.</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"
          aria-label="Share source type"
        >
          <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')"
          >
            Entire screen
            <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')"
          >
            Windows
            <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">
            Computer audio will be shared. MeToYou audio is filtered when supported, and your microphone stays on its normal voice track.
          </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">
                      {{ source.kind === 'screen' ? 'Entire screen' : 'Window' }}
                    </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">No {{ activeTab() === 'screen' ? 'screens' : 'windows' }} available</p>
              <p class="mt-1 text-sm text-muted-foreground">
                {{
                  activeTab() === 'screen'
                    ? 'No displays were reported by Electron right now.'
                    : 'Restore the window you want to share and try again.'
                }}
              </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()"
        >
          Cancel
        </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()"
        >
          Start sharing
        </button>
      </footer>
    </section>
  </div>
}