{% 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>

{% 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 %}