{% extends "base.html" %} {% block content %}
<div class="container">
  <h1 id="pageHeading">AniWorld Downloader</h1>
  <div class="segmented-control" id="siteSwitch">
    <div class="segmented-track" id="segmentedTrack">
      <div class="segmented-thumb" id="segmentedThumb"></div>
      <button class="segmented-btn active" id="labelAniworld" onclick="switchSite('aniworld')">AniWorld</button>
      <button class="segmented-btn" id="labelSto" onclick="switchSite('sto')">SerienStream</button>
      {% if burningseries_enabled %}
      <button class="segmented-btn" id="labelBurningSeries" onclick="switchSite('burningseries')">BurningSeries</button>
      {% endif %}
      <button class="segmented-btn" id="labelMegakino" onclick="switchSite('megakino')">MegaKino</button>
      <button class="segmented-btn" id="labelCineby" onclick="switchSite('cineby')">Cineby</button>
      {% if kinox_enabled %}
      <button class="segmented-btn" id="labelKinox" onclick="switchSite('kinox')">Kinox</button>
      {% endif %}
      <button class="segmented-btn" id="labelFilmPalast" onclick="switchSite('filmpalast')">FilmPalast</button>
      {% if htv_enabled %}
      <button class="segmented-btn" id="labelHtv" onclick="switchSite('htv')">Hanime</button>
      {% endif %}
      <button class="segmented-btn" id="labelMangaFire" onclick="switchSite('mangafire')">MangaFire</button>
    </div>
  </div>
  <div class="search-bar">
    <input type="text" id="searchInput" placeholder="Search for anime..." autofocus />
    <button id="searchBtn" onclick="doSearch()" data-i18n="index.search">Search</button>
    <button class="btn-random" id="randomBtn" onclick="doRandom()" data-i18n="index.random">
      Random
    </button>
  </div>
  <div class="spinner" id="searchSpinner">Searching...</div>
  <div class="spinner" id="browseSpinner" style="display: none">Loading provider...</div>
  <div class="results" id="results"></div>
  <div id="browse">
    <div class="browse-section" id="newAnimesSection">
      <h2 class="browse-heading">New Animes</h2>
      <div class="browse-grid" id="newAnimesGrid"></div>
    </div>
    <div class="browse-section" id="popularAnimesSection">
      <h2 class="browse-heading">Popular Animes</h2>
      <div class="browse-grid" id="popularAnimesGrid"></div>
    </div>
    <div class="browse-section" id="newSeriesSection" style="display: none">
      <h2 class="browse-heading">New Series</h2>
      <div class="browse-grid" id="newSeriesGrid"></div>
    </div>
    <div class="browse-section" id="popularSeriesSection" style="display: none">
      <h2 class="browse-heading">Popular Series</h2>
      <div class="browse-grid" id="popularSeriesGrid"></div>
    </div>
    <div class="browse-section" id="popularMoviesSection" style="display: none">
      <h2 class="browse-heading">Popular Movies</h2>
      <div class="browse-grid" id="popularMoviesGrid"></div>
    </div>
    <div class="browse-section" id="kinoxMoviesSection" style="display: none">
      <h2 class="browse-heading" data-i18n="browse.new_movies">New Movies</h2>
      <div class="browse-grid" id="kinoxMoviesGrid"></div>
    </div>
    <div class="browse-section" id="filmpalastMoviesSection" style="display: none">
      <h2 class="browse-heading" data-i18n="browse.new_movies">New Movies</h2>
      <div class="browse-grid" id="filmpalastMoviesGrid"></div>
    </div>
    <div class="browse-section" id="burningseriesSection" style="display: none">
      <h2 class="browse-heading" data-i18n="browse.recent_series">Recently Updated</h2>
      <div class="browse-grid" id="burningseriesGrid"></div>
    </div>
    <div class="browse-section" id="cinebySection" style="display: none">
      <h2 class="browse-heading" data-i18n="browse.trending_movies">Trending Movies</h2>
      <div class="browse-grid" id="cinebyGrid"></div>
    </div>
    <div class="browse-section" id="mangaFireTrendingSection" style="display: none">
      <h2 class="browse-heading">MangaFire Trending</h2>
      <div class="browse-grid" id="mangaFireTrendingGrid"></div>
    </div>
    <div class="browse-section" id="htvTrendingSection" style="display: none">
      <h2 class="browse-heading">New Hentai</h2>
      <div class="browse-grid" id="htvTrendingGrid"></div>
    </div>
  </div>
</div>

<div class="overlay" id="overlay" onclick="closeModalOutside(event)">
  <div class="modal" id="modal">
    <button class="close" onclick="closeModal()">&times;</button>
    <div class="modal-header">
      <img id="modalPoster" src="" alt="" />
      <div class="modal-meta">
        <h2 id="modalTitle"></h2>
        <div class="genres" id="modalGenres"></div>
        <div class="year" id="modalYear"></div>
        <div class="desc" id="modalDesc"></div>
      </div>
    </div>
    <div class="controls">
      <select id="languageSelect">
        {% for key, label in lang_labels.items() %}
        <option value="{{ label }}" {% if label==default_web_language %}selected{% endif %}>
          {{ label }}
        </option>
        {% endfor %}
      </select>
      <select id="providerSelect">
        {% for p in supported_providers %}
        <option value="{{ p }}">{{ p }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="controls manga-fire-controls" id="mangaFireControls" style="display: none; margin-top: 12px; gap: 16px; flex-wrap: wrap; align-items: center;">
      <label class="select-all-label"><input type="checkbox" id="showUnofficial" onchange="toggleShowUnofficial()" /> Show unofficial chapters</label>
      <label class="select-all-label" style="display: flex; align-items: center; gap: 8px;">Format:
        <select id="mangaFireFormat">
          <option value="jpg">JPG (Images)</option>
          <option value="cbz">CBZ (Archive)</option>
        </select>
      </label>
    </div>
    <div class="custom-path-row" id="customPathRow" style="display: none">
      <label class="custom-path-label" data-i18n="index.download_folder">Download Folder</label>
      <select id="customPathSelect">
        <option value="" data-i18n="index.default">Default</option>
      </select>
    </div>
    <script>
      window.ANIWORLD_LANGS = {{ lang_labels | tojson }};
      window.STO_LANGS = {{ sto_lang_labels | tojson }};
      window.MEGAKINO_LANGS = {{ megakino_lang_labels | tojson }};
      window.KINOX_LANGS = { "1": "German Dub", "2": "English Dub" };
      window.BURNINGSERIES_LANGS = { "1": "German Dub", "2": "English Dub" };
      window.FILMPALAST_LANGS = { "1": "German Dub", "2": "English Dub" };
      // German Dub is only kept visible for titles that actually have it —
      // /api/providers reports the available dubs per title and the language
      // select hides the ones it omits.
      window.CINEBY_LANGS = { "4": "English Dub", "1": "German Dub" };
      window.DEFAULT_WEB_LANGUAGE = {{ default_web_language | tojson }};
      window.HTV_ENABLED = {{ htv_enabled | tojson }};
      window.BURNINGSERIES_ENABLED = {{ burningseries_enabled | tojson }};
      window.KINOX_ENABLED = {{ kinox_enabled | tojson }};
    </script>
    <div class="episodes-header">
      <h3 data-i18n="index.episodes">Episodes</h3>
      <div style="display: flex; align-items: center; gap: 16px">
        <label class="select-all-label"><input type="checkbox" id="autoSyncCheck" onchange="toggleAutoSync()" />
          <span data-i18n="index.autosync">Keep Updated (Auto-Sync)</span></label>
        <label class="select-all-label"><input type="checkbox" id="selectAll" onchange="toggleSelectAll()" />
          <span data-i18n="index.selectall">Select All</span></label>
      </div>
    </div>
    <div class="season-accordion" id="seasonAccordion"></div>
    <div class="spinner" id="episodeSpinner">Loading episodes...</div>
    <div class="status-bar" id="statusBar">
      <span id="statusText"></span>
    </div>
    <div class="modal-actions">
      <button class="btn-download-selected" id="downloadSelectedBtn" onclick="startDownload(false)" data-i18n="index.download_selected">
        Download Selected
      </button>
      <button class="btn-download-all" id="downloadAllBtn" onclick="startDownload(true)" data-i18n="index.download_all">
        Download All
      </button>
      <button class="btn-download-all-langs" id="downloadAllLangsBtn" onclick="startDownloadAllLangs()" style="display: none" data-i18n="index.download_all_langs">
        Download All Languages
      </button>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}