<div
  class="relative bg-black rounded-lg overflow-hidden"
  [class.fixed]="isFullscreen()"
  [class.inset-0]="isFullscreen()"
  [class.z-50]="isFullscreen()"
  [class.hidden]="!hasStream()"
>
  <!-- Video Element -->
  <video
    #screenVideo
    autoplay
    playsinline
    class="w-full h-full object-contain"
    [class.max-h-[400px]]="!isFullscreen()"
  ></video>

  <!-- Overlay Controls -->
  <div class="absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent opacity-0 hover:opacity-100 transition-opacity">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-2 text-white">
        <ng-icon
          name="lucideMonitor"
          class="w-4 h-4"
        />
        <span class="text-sm font-medium">{{ sharingLabel() }}</span>
      </div>
      <div class="flex items-center gap-3">
        <!-- Viewer volume -->
        <div class="flex items-center gap-2 text-white">
          <span class="text-xs opacity-80">{{ 'screenShare.viewer.volume' | translate: { volume: screenVolume() } }}</span>
          <input
            type="range"
            min="0"
            max="200"
            [value]="screenVolume()"
            (input)="onScreenVolumeChange($event)"
            class="w-32 accent-white"
          />
        </div>
        <button
          (click)="toggleFullscreen()"
          type="button"
          class="grid h-9 w-9 place-items-center rounded-lg bg-white/10 transition-colors hover:bg-white/20"
        >
          @if (isFullscreen()) {
            <ng-icon
              name="lucideMinimize"
              class="w-4 h-4 text-white"
            />
          } @else {
            <ng-icon
              name="lucideMaximize"
              class="w-4 h-4 text-white"
            />
          }
        </button>
        @if (isLocalShare()) {
          <button
            (click)="stopSharing()"
            type="button"
            class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
            [title]="'screenShare.viewer.stopSharing' | translate"
          >
            <ng-icon
              name="lucideX"
              class="w-4 h-4 text-white"
            />
          </button>
        } @else {
          <button
            (click)="stopWatching()"
            type="button"
            class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
            [title]="'screenShare.viewer.stopWatching' | translate"
          >
            <ng-icon
              name="lucideX"
              class="w-4 h-4 text-white"
            />
          </button>
        }
      </div>
    </div>
  </div>

  <!-- No Stream Placeholder -->
  @if (!hasStream()) {
    <div class="absolute inset-0 flex items-center justify-center bg-secondary">
      <div class="text-center text-muted-foreground">
        <ng-icon
          name="lucideMonitor"
          class="w-12 h-12 mx-auto mb-2 opacity-50"
        />
        <p>{{ 'screenShare.viewer.waiting' | translate }}</p>
      </div>
    </div>
  }
</div>
