{% extends "base.html" %}
{% block title %}Seerr Anfragen — AniWorld Downloader{% endblock %}
{% block content %}
<div class="seerr-container">

  <div class="page-header" style="margin-bottom:8px">
    <h1 class="page-title">Seerr Anfragen</h1>
    <p class="page-subtitle">Ausstehende &amp; angenommene Serien-Anfragen</p>
  </div>

  <div class="lib-toolbar">
    <span class="lib-watcher-status" id="seerrStatus" style="display:none">
      <span class="lib-watcher-dot" id="seerrStatusDot"></span>
      <span id="seerrStatusLabel"></span>
    </span>
    <div class="lib-toolbar-right">
      <button class="btn btn-secondary btn-sm" onclick="seerrLoad()">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:5px">
          <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
          <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
        </svg>Aktualisieren
      </button>
    </div>
  </div>

  <div id="seerrList"></div>
</div>

<!-- ===== Search Modal ===== -->
<div class="overlay" id="seerrSearchOverlay" onclick="if(event.target===this)closeSeerrSearch()" style="display:none">
  <div class="modal" style="max-width:580px">
    <button class="close" onclick="closeSeerrSearch()" aria-label="Schließen">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
    <h2 id="seerrSearchTitle" style="font-size:1.1rem;margin:0 0 14px">Suchen</h2>

    <div class="search-bar" style="margin-bottom:12px">
      <input type="text" id="seerrSearchInput" placeholder="Titel eingeben…" autocomplete="off"
             onkeydown="if(event.key==='Enter')seerrDoSearch()">
      <button onclick="seerrDoSearch()">Suchen</button>
    </div>

    <div id="seerrSearchResults" class="seerr-search-results"></div>
    <div class="seerr-search-footer">
      <button class="btn btn-secondary" onclick="closeSeerrSearch()">Abbrechen</button>
      <button class="btn btn-reject" id="seerrSearchDeclineBtn" onclick="seerrDeclineFromSearch()" style="display:none">Ablehnen</button>
    </div>
  </div>
</div>

<!-- ===== Series Modal ===== -->
<div class="overlay" id="seerrSeriesOverlay" onclick="if(event.target===this)closeSeerrSeries()" style="display:none">
  <div class="modal" id="seerrSeriesModal">
    <button class="close" onclick="closeSeerrSeries()" aria-label="Schließen">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
    <div class="modal-header">
      <div class="modal-poster-col">
        <img id="seerrModalPoster" src="" alt="" />
        <div id="seerrTmdbFsk" class="tmdb-fsk-badge" style="display:none;"></div>
      </div>
      <div class="modal-meta">
        <h2 id="seerrModalTitle"></h2>
        <div id="seerrTmdbProviders" class="tmdb-providers" style="display:none;"></div>
        <div class="genres" id="seerrModalGenres"></div>
        <div class="year"  id="seerrModalYear"></div>
        <div class="desc"  id="seerrModalDesc"></div>
      </div>
    </div>

    <div class="controls">
      <select id="seerrLangSelect">
        {% for key, label in lang_labels.items() %}
        <option value="{{ label }}">{{ label }}</option>
        {% endfor %}
      </select>
      <select id="seerrProvSelect">
        {% for p in supported_providers %}
        <option value="{{ p }}">{{ p }}</option>
        {% endfor %}
      </select>
      <select id="seerrPathSelect" style="display:none">
        <option value="">Standard</option>
      </select>
    </div>

    <script>
      window.SEERR_ANIWORLD_LANGS = {{ lang_labels | tojson }};
      window.SEERR_STO_LANGS = {{ sto_lang_labels | tojson }};
    </script>

    <div class="lang-avail-banner" id="seerrLangBanner" style="display:none"></div>

    <div class="episodes-header" id="seerrEpisodesHeader">
      <h3 id="seerrEpisodesHeading">Episoden</h3>
      <label class="select-all-label">
        <input type="checkbox" id="seerrSelectAll" onchange="seerrToggleSelectAll()" />
        Alle auswählen
      </label>
    </div>
    <div class="season-accordion" id="seerrAccordion"></div>
    <div class="spinner" id="seerrEpSpinner">Lade Episoden…</div>

    <div class="modal-actions" id="seerrModalActions">
      <!-- filled dynamically -->
    </div>
  </div>
</div>


<!-- VeeV Availability Check Overlay -->
<div id="veevCheckOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(4px)">
  <div style="background:var(--bg-elevated,#1a1a2e);border:1px solid var(--border,#333);border-radius:16px;padding:40px 48px;text-align:center;max-width:420px;width:90%;display:flex;flex-direction:column;align-items:center;gap:16px">
    <h3 style="margin:0;font-size:1.1rem;font-weight:600;color:var(--text-primary,#fff)">Verfügbarkeit Prüfen</h3>
    <div id="veevCheckSpinnerWrap" style="display:flex;align-items:center;justify-content:center;margin:4px 0">
      <div id="veevCheckSpinner" style="width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,0.08);border-top-color:#6c8ef7;animation:veev-spin 0.85s linear infinite"></div>
    </div>
    <p id="veevCheckText" style="margin:0;font-size:0.88rem;color:var(--text-muted,#aaa);line-height:1.55;max-width:300px">Es wird überprüft ob der ausgewählte Inhalt auf Veev verfügbar ist</p>
    <div id="veevCheckError" style="display:none;font-size:0.88rem;color:#e05a5a;background:rgba(224,90,90,0.1);border:1px solid rgba(224,90,90,0.25);border-radius:8px;padding:10px 14px;line-height:1.5;text-align:left;width:100%"></div>
    <button id="veevCheckCloseBtn" onclick="closeVeevCheck()" style="display:none;background:var(--bg-surface,#222);border:1px solid var(--border,#333);color:var(--text-primary,#fff);font-size:0.85rem;padding:8px 22px;border-radius:8px;cursor:pointer">Schließen</button>
  </div>
</div>
<style>@keyframes veev-spin{to{transform:rotate(360deg)}}</style>
{% endblock %}
{% block scripts %}
{% set is_admin = not auth_enabled or (current_user and current_user.role == 'admin') %}
<script>var seerrCanDecline = {{ 'true' if is_admin else 'false' }};</script>
<script src="{{ url_for('static', filename='seerr.js') }}"></script>
{% endblock %}