{{define "video_player"}}
<div data-video-player
  data-mal-id="{{.WatchData.MalID}}" 
  data-current-episode="{{.WatchData.CurrentEpisode}}" 
  data-total-episodes="{{.TotalEpisodes}}"
  data-initial-mode="{{.WatchData.InitialMode}}"
  data-mode-switched-from="{{.WatchData.ModeSwitchedFrom}}"
  data-anime-title="{{.WatchData.Title}}"
  data-start-time-seconds="{{.WatchData.StartTimeSeconds}}"
  data-mode-sources='{{json .WatchData.ModeSources}}'
  data-available-modes='{{json .WatchData.AvailableModes}}'
  data-segments='{{json .WatchData.Segments}}'
  data-is-airing="{{.WatchData.Airing}}"
  data-anime-title-english="{{.WatchData.Title}}"
  data-anime-image="{{.WatchData.MalID}}"
  class="group relative aspect-video w-full overflow-hidden bg-black [&.show-controls_[data-video-overlay]]:opacity-100 [&.fullscreen:not(.show-controls)_[data-video-overlay]]:opacity-0 [&.fullscreen:not(.show-controls)_[data-video-overlay]]:pointer-events-none [&.fullscreen:not(.show-controls)]:cursor-none [&.fullscreen:not(.show-controls)_video]:cursor-none [&.video-ended_video]:opacity-0">

  
  <video class="h-full w-full cursor-pointer" preload="metadata" playsinline></video>
  <script>
  (function() {
    var p = document.currentScript.closest('[data-video-player]');
    var v = p.querySelector('video');
    var sources = JSON.parse(p.getAttribute('data-mode-sources') || '{}');
    var mode = p.getAttribute('data-initial-mode') || 'dub';
    var stored = localStorage.getItem('player-audio-mode');
    if (stored && sources[stored] && sources[stored].token) mode = stored;
    var src = sources[mode];
    if (!src || !src.token) {
      for (var k in sources) {
        if (sources[k] && sources[k].token) { src = sources[k]; mode = k; break; }
      }
    }
    if (src && src.token) {
      v.src = '/watch/proxy/stream?mode=' + encodeURIComponent(mode) + '&token=' + encodeURIComponent(src.token);
      v.play().catch(function() {});
    }
  })();
  </script>
  
  <div data-loading class="absolute inset-0 flex items-center justify-center bg-black/60 hidden z-50">
    <div class="border-accent size-10 animate-spin rounded-full border-4 border-t-transparent"></div>
  </div>

  <div data-video-overlay class="absolute inset-x-0 bottom-0 bg-linear-to-t from-black/90 via-black/40 to-transparent p-4 transition-opacity duration-300 opacity-0 group-hover:opacity-100 z-40">
    <div class="flex flex-col gap-3">
      <div class="flex items-center justify-between px-2">
        <div class="flex items-center gap-4">
          <button data-play-pause data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70">
            <svg data-icon-play class="size-6 transition-colors duration-200" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
            <svg data-icon-pause class="size-6 transition-colors duration-200 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="6" x2="9" y2="18" /><line x1="15" y1="6" x2="15" y2="18" /></svg>
          </button>
          
          <div data-volume-wrap class="group/volume relative flex items-center justify-center">
            <div data-volume-panel class="pointer-events-none absolute bottom-full left-1/2 flex h-32 w-12 -translate-x-1/2 items-end justify-center opacity-0 group-hover/volume:pointer-events-auto group-hover/volume:opacity-100">
              <div class="relative flex h-24 w-8 items-center justify-center">
                <div class="relative z-10 flex h-20 w-1.5 flex-col justify-end rounded-full bg-white/50 shadow-[0_0_6px_rgba(0,0,0,0.6)]">
                  <input type="range" data-volume-range min="0" max="100" step="5" class="absolute -inset-x-4 inset-y-0 z-10 cursor-pointer opacity-0" style="writing-mode: vertical-lr; direction: rtl;">
                  <div data-volume-underline class="bg-accent pointer-events-none w-full rounded-full shadow-[0_0_4px_rgba(0,0,0,0.4)]" style="height: 100%"></div>
                </div>
              </div>
            </div>
            <button data-mute data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70">
              <svg data-icon-volume class="size-6 transition-colors duration-200" viewBox="0 0 24 24" aria-hidden="true"><polygon points="5 10 9 10 13 6 13 18 9 14 5 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polygon><path d="M16 9c1.3 1.3 1.3 4.7 0 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18.8 6.5c3 2.9 3 8.1 0 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path></svg>
              <svg data-icon-muted class="size-6 transition-colors duration-200 hidden" viewBox="0 0 24 24" aria-hidden="true"><polygon points="5 10 9 10 13 6 13 18 9 14 5 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polygon><line x1="16" y1="9" x2="21" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="21" y1="9" x2="16" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg>
            </button>
          </div>
        </div>

        <div class="flex items-center gap-4">
          <ui-dropdown class="relative block" data-align="right" data-position="top">
            <div data-trigger class="cursor-pointer">
                <button data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70" aria-label="Settings">
                <svg class="size-6 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
              </button>
            </div>
            <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-[var(--shadow-card)] ring-1 ring-black/10 right-0 bottom-full mb-2">
              <div class="flex flex-col py-1">
                <div class="flex items-center justify-between px-5 py-2.5">
                  <span class="text-[15px] font-normal text-foreground">Autoplay</span>
                  <label class="relative inline-flex cursor-pointer items-center">
                    <input id="player-autoplay" type="checkbox" data-autoplay class="peer sr-only" checked />
                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-black/60 ring-1 ring-white/10 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                  </label>
                </div>
                <div class="flex items-center justify-between px-5 py-2.5">
                  <span class="text-[15px] font-normal text-foreground">Auto-skip</span>
                  <label class="relative inline-flex cursor-pointer items-center">
                    <input id="player-autoskip" type="checkbox" data-autoskip class="peer sr-only" />
                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-black/60 ring-1 ring-white/10 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                  </label>
                </div>
                <div class="my-1 h-px w-full bg-white/10"></div>
                <div class="py-1">
                  <span class="mb-1 block px-5 text-xs font-normal tracking-wider text-foreground-muted">Audio / Subtitles</span>
                  <div class="flex flex-col">
                    <button data-mode-dub data-unstyled-button class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
                      <span class="text-sm font-normal">English (Dub)</span>
                    </button>
                    <button data-mode-sub data-unstyled-button class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
                      <span class="text-sm font-normal">Japanese (Sub)</span>
                    </button>
                    <div class="hidden px-5 py-2 flex flex-col gap-1">
                      <span class="text-[10px] text-neutral-500 uppercase font-normal tracking-widest">Subtitles</span>
                      <select id="player-subtitle-select" data-subtitle-select class="w-full bg-white/5 text-white text-xs px-2 py-1.5 outline-none rounded"></select>
                    </div>
                    <div class="hidden px-5 py-2 flex flex-col gap-1">
                      <span class="text-[10px] text-neutral-500 uppercase font-normal tracking-widest">Quality</span>
                      <select id="player-quality-select" data-quality-select class="w-full bg-white/5 text-white text-xs px-2 py-1.5 outline-none rounded"></select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </ui-dropdown>
          
          <button data-fullscreen data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/70">
            <svg class="size-6 transition-colors duration-200" viewBox="0 0 240 240" aria-hidden="true"><path d="M143.7,53.9c-1.9-1.9-1.3-4,1.4-4.4l50.6-8.4c1.8-0.5,3.7,0.6,4.2,2.4c0.2,0.6,0.2,1.2,0,1.7l-8.4,50.6c-0.4,2.7-2.4,3.4-4.4,1.4l-14.5-14.5l-28.2,28.2l-14.3-14.3l28.2-28.2L143.7,53.9z M44.2,200.9l50.6-8.4c2.7-0.4,3.4-2.4,1.4-4.4l-14.5-14.5l28.2-28.2l-14.3-14.3l-28.2,28.2l-14.5-14.5c-1.9-1.9-4-1.3-4.4,1.4l-8.4,50.6c-0.5,1.8,0.6,3.6,2.4,4.2C43,201,43.6,201,44.2,200.9L44.2,200.9z" fill="currentColor"></path></svg>
          </button>
        </div>
      </div>

      <div class="flex items-center gap-4 text-xs font-medium text-white px-2">
        <span data-time class="w-12 text-center">0:00</span>
        <div data-progress-wrap class="group/progress relative flex h-6 flex-1 cursor-pointer items-center">
          <div data-preview-popover class="hidden pointer-events-none absolute bottom-full mb-4 -translate-x-1/2 bg-white px-2 py-1 text-xs font-bold text-black shadow-md opacity-0 transition-opacity duration-200">
            <span data-preview-time>0:00</span>
            <div class="absolute left-1/2 top-full h-0 w-0 -translate-x-1/2 border-x-[6px] border-x-transparent border-t-[6px] border-t-white"></div>
          </div>
          <div class="relative flex h-1 w-full items-center bg-white/25 transition-all group-hover/progress:h-1.5">
            <div data-buffered class="absolute left-0 top-0 z-0 h-full bg-white/60 transition-all duration-200" style="width: 0%"></div>
            <div data-progress class="absolute left-0 top-0 z-10 h-full bg-accent" style="width: 0%"></div>
            <div data-segments class="absolute inset-0 z-30 pointer-events-none overflow-hidden"></div>
          </div>
          <div data-scrubber class="pointer-events-none absolute top-1/2 z-40 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-sm shadow-black/30 ring-1 ring-white/30 opacity-0 transition-[opacity,transform] duration-150 group-hover/progress:opacity-100 group-hover/progress:scale-110" style="left: 0%"></div>
        </div>
        <span class="w-12 text-center" data-duration>0:00</span>
      </div>

      <button data-skip class="hidden absolute right-6 bottom-24 bg-white/95 text-black font-bold px-4 py-2 text-sm rounded shadow-lg shadow-black/30 ring-1 ring-black/10 hover:bg-white transition-colors">Skip</button>
      <button data-backward data-unstyled-button class="hidden absolute left-1/4 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" /></svg></button>
      <button data-forward data-unstyled-button class="hidden absolute right-1/4 top-1/2 -translate-y-1/2 translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" /></svg></button>
      
    </div>
  </div>
  <div data-subtitle-text class="absolute bottom-20 left-0 right-0 text-center pointer-events-none z-30" style="text-shadow: 0px 0px 2px rgba(0,0,0,0.55); font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 600; color: white;"></div>
</div>
{{end}}