<section class="mt-2 max-w-xl overflow-hidden rounded-md border border-border bg-card shadow-sm">
  <div class="flex items-center justify-between gap-3 border-b border-border px-3 py-2">
    <div class="min-w-0">
      <p class="truncate text-sm font-medium text-foreground">{{ filename() }}</p>
      <p class="text-xs text-muted-foreground">{{ sizeLabel() }}</p>
    </div>

    <div class="flex shrink-0 items-center gap-1">
      <button
        type="button"
        class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
        title="{{ 'experimental.vlcPlayer.download' | translate }}"
        aria-label="{{ 'experimental.vlcPlayer.download' | translate }}"
        (click)="requestDownload()"
      >
        <ng-icon
          name="lucideDownload"
          class="h-4 w-4"
        />
      </button>

      <button
        type="button"
        class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
        title="{{ 'experimental.vlcPlayer.close' | translate }}"
        aria-label="{{ 'experimental.vlcPlayer.close' | translate }}"
        (click)="close()"
      >
        <ng-icon
          name="lucideX"
          class="h-4 w-4"
        />
      </button>
    </div>
  </div>

  <div class="relative min-h-72 bg-black">
    <div
      #playerMount
      class="min-h-72 w-full"
    ></div>

    @if (status() === 'loading') {
      <div class="absolute inset-0 grid place-items-center bg-black/80 px-4 text-sm text-white/80">
        {{ 'experimental.vlcPlayer.loading' | translate }}
      </div>
    }

    @if (status() === 'error') {
      <div class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/85 px-6 text-center">
        <p class="max-w-md text-sm text-white/80">{{ errorMessage() }}</p>
        <div class="flex flex-wrap justify-center gap-2">
          <button
            type="button"
            class="inline-flex items-center gap-2 rounded-md bg-white/10 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-white/20"
            (click)="retry()"
          >
            <ng-icon
              name="lucideRefreshCw"
              class="h-3.5 w-3.5"
            />
            {{ 'experimental.vlcPlayer.retry' | translate }}
          </button>
          <button
            type="button"
            class="inline-flex items-center gap-2 rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black transition-colors hover:bg-white/90"
            (click)="requestDownload()"
          >
            <ng-icon
              name="lucideDownload"
              class="h-3.5 w-3.5"
            />
            Download
          </button>
        </div>
      </div>
    }
  </div>
</section>
