{% 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')">S.TO</button>
      {% if htv_enabled %}
      <button class="segmented-btn" id="labelHtv" onclick="switchSite('htv')">Hanime</button>
      {% endif %}
    </div>
  </div>
  <div class="search-bar">
    <input type="text" id="searchInput" placeholder="Search for anime..." autofocus />
    <button id="searchBtn" onclick="doSearch()">Search</button>
    <button class="btn-random" id="randomBtn" onclick="doRandom()">
      Random
    </button>
  </div>
  <div class="spinner" id="searchSpinner">Searching...</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="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="custom-path-row" id="customPathRow" style="display: none">
      <label class="custom-path-label">Download Folder</label>
      <select id="customPathSelect">
        <option value="">Default</option>
      </select>
    </div>
    <script>
      window.ANIWORLD_LANGS = {{ lang_labels | tojson }};
      window.STO_LANGS = {{ sto_lang_labels | tojson }};
      window.DEFAULT_WEB_LANGUAGE = {{ default_web_language | tojson }};
      window.HTV_ENABLED = {{ htv_enabled | tojson }};
    </script>
    <div class="episodes-header">
      <h3>Episodes</h3>
      <div style="display: flex; align-items: center; gap: 16px">
        <label class="select-all-label"><input type="checkbox" id="autoSyncCheck" onchange="toggleAutoSync()" />
          Keep Updated (Auto-Sync)</label>
        <label class="select-all-label"><input type="checkbox" id="selectAll" onchange="toggleSelectAll()" />
          Select All</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)">
        Download Selected
      </button>
      <button class="btn-download-all" id="downloadAllBtn" onclick="startDownload(true)">
        Download All
      </button>
      <button class="btn-download-all-langs" id="downloadAllLangsBtn" onclick="startDownloadAllLangs()" style="display: none">
        Download All Languages
      </button>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}