{% extends "base.html" %}
{% block content %}
<div class="container">
  <h1 id="pageHeading">AniWorld Downloader</h1>
  <div class="site-switch">
    <span class="site-label active" id="labelAniworld">AniWorld</span>
    <label class="switch">
      <input type="checkbox" id="siteToggle" onchange="toggleSite()">
      <span class="slider"></span>
    </label>
    <span class="site-label" id="labelSto">S.TO</span>
  </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>
</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 }}">{{ label }}</option>
        {% endfor %}
      </select>
      <select id="providerSelect">
        {% for p in supported_providers %}
        <option value="{{ p }}">{{ p }}</option>
        {% endfor %}
      </select>
    </div>
    <script>
      window.ANIWORLD_LANGS = {{ lang_labels|tojson }};
      window.STO_LANGS = {{ sto_lang_labels|tojson }};
    </script>
    <div class="episodes-header">
      <h3>Episodes</h3>
      <label class="select-all-label"><input type="checkbox" id="selectAll" onchange="toggleSelectAll()"> Select All</label>
    </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 %}