{% extends "base.html" %}
{% block title %}Mediathek — AniWorld Downloader{% endblock %}
{% block styles %}<link rel="stylesheet" href="{{ url_for('static', filename='library.css') }}">{% endblock %}
{% block content %}
<div class="library-container">

  <div class="page-header" style="margin-bottom:8px">
    <h1 class="page-title">Mediathek</h1>
    <p class="page-subtitle">Alle heruntergeladenen Dateien &middot; <span id="libTotalSize" style="color:var(--text-muted)"></span></p>
    <div id="libSummaryPills" style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;"></div>
  </div>

  <!-- Toolbar -->
  <div class="lib-toolbar">
    <span class="lib-scan-badge" id="libScanBadge">
      <span class="lib-scan-spinner"></span>Wird gescannt…
    </span>
    <span class="lib-watcher-status" id="libWatcherTip" title="">
      <span class="lib-watcher-dot" id="libWatcherDot"></span>
      <span class="lib-watcher-label" id="libWatcherLabel">Watcher…</span>
    </span>
    <span class="lib-move-pill" id="libMovePill" style="display:none" onclick="libOpenMoveProgress()" title="Verschiebevorgang läuft">
      <span class="lib-move-pill-spinner"></span>
      <span id="libMovePillPct">0%</span>
      <span class="lib-move-pill-label">wird verschoben</span>
    </span>
    <div class="lib-toolbar-right">
      <span class="lib-last-scanned" id="libLastScanned"></span>
      <!-- Filter -->
      <div class="lib-sort-group">
        <button class="lib-sort-btn active" id="libFilter-all"    onclick="libSetFilter('all')"    title="Alles anzeigen">Alle</button>
        <button class="lib-sort-btn"        id="libFilter-series" onclick="libSetFilter('series')" title="Nur Serien/Anime">Serien</button>
        <button class="lib-sort-btn"        id="libFilter-movies" onclick="libSetFilter('movies')" title="Nur Filme">
          🎬 Filme
        </button>
      </div>
      <!-- Sort -->
      <div class="lib-sort-group">
        <button class="lib-sort-btn active" id="libSort-name"    onclick="libSetSort('name')"    title="Nach Name sortieren">A–Z</button>
        <button class="lib-sort-btn"        id="libSort-size"    onclick="libSetSort('size')"    title="Nach Größe sortieren">Größe</button>
        <button class="lib-sort-btn"        id="libSort-episodes" onclick="libSetSort('episodes')" title="Nach Episodenanzahl sortieren">Ep.</button>
      </div>
      <button class="btn btn-secondary btn-sm" id="libRefreshBtn" onclick="libLoad(true)">
        <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>

  <!-- Search row -->
  <div class="lib-search-row">
    <input class="lib-search-input" id="libSearchInput" type="search" placeholder="Suchen…" oninput="libOnSearch(this.value)" autocomplete="off">
  </div>

  <div id="libList"></div>
</div>

{% endblock %}
{% block scripts %}
<script>
  var libraryCanDelete = {{ 'true' if not auth_enabled or (current_user and current_user.role == 'admin') else 'false' }};
  var libraryCanStream = true;
</script>
<script src="{{ url_for('static', filename='library.js') }}"></script>
{% endblock %}