{% extends "base.html" %}

{% block content %}
<div class="container">
  <h1 data-i18n="index.heading">AniWorld Downloader</h1>

  <div class="segmented" id="siteSwitch">
    <div class="segmented-track" id="segmentedTrack">
      <div class="segmented-thumb" id="segmentedThumb"></div>
      <button class="segmented-btn active" data-site="aniworld">AniWorld</button>
      <button class="segmented-btn" data-site="sto">SerienStream</button>
      {% if burningseries_enabled %}
      <button class="segmented-btn" data-site="burningseries">BurningSeries</button>
      {% endif %}
      <button class="segmented-btn" data-site="megakino">MegaKino</button>
      <button class="segmented-btn" data-site="cineby">Cineby</button>
      {% if kinox_enabled %}
      <button class="segmented-btn" data-site="kinox">Kinox</button>
      {% endif %}
      <button class="segmented-btn" data-site="filmpalast">FilmPalast</button>
      {% if htv_enabled %}
      <button class="segmented-btn" data-site="htv">Hanime</button>
      {% endif %}
      <button class="segmented-btn" data-site="mangafire">MangaFire</button>
    </div>
  </div>

  <div class="search-bar">
    <input type="text" id="searchInput" placeholder="Search AniWorld..." autofocus />
    <button class="btn btn-primary" id="searchBtn" data-i18n="index.search">Search</button>
    <button class="btn btn-secondary" id="randomBtn" data-i18n="index.random">Random</button>
  </div>

  <div class="genre-bar" id="genreBar" hidden>
    <span class="genre-bar-title" data-i18n="browse.genres">Discover by genre</span>
    <div class="genre-list" id="genreList" role="list"></div>
  </div>

  <div class="spinner" id="searchSpinner" data-i18n="index.searching">Searching...</div>
  <div class="results" id="results"></div>

  <div class="genre-more" id="genreMore" hidden>
    <button class="btn btn-secondary" id="genreMoreBtn" data-i18n="browse.load_more">Load more</button>
  </div>

  <div id="browse">
    <section class="browse-section" data-row="new_animes" data-sites="aniworld">
      <h2 class="browse-heading" data-i18n="browse.new_animes">New Animes</h2>
      <div class="browse-grid"></div>
    </section>
    <section class="browse-section" data-row="popular_animes" data-sites="aniworld">
      <h2 class="browse-heading" data-i18n="browse.popular_animes">Popular Animes</h2>
      <div class="browse-grid"></div>
    </section>
    <section class="browse-section" data-row="new_series" data-sites="sto">
      <h2 class="browse-heading" data-i18n="browse.new_series">New Series</h2>
      <div class="browse-grid"></div>
    </section>
    <section class="browse-section" data-row="popular_series" data-sites="sto">
      <h2 class="browse-heading" data-i18n="browse.popular_series">Popular Series</h2>
      <div class="browse-grid"></div>
    </section>
    <section class="browse-section" data-row="popular_movies" data-sites="megakino">
      <h2 class="browse-heading" data-i18n="browse.popular_movies">Popular Movies</h2>
      <div class="browse-grid"></div>
    </section>
    {% if kinox_enabled %}
    <section class="browse-section" data-row="kinox_movies" data-sites="kinox">
      <h2 class="browse-heading" data-i18n="browse.new_movies">New Movies</h2>
      <div class="browse-grid"></div>
    </section>
    {% endif %}
    <section class="browse-section" data-row="filmpalast_movies" data-sites="filmpalast">
      <h2 class="browse-heading" data-i18n="browse.new_movies">New Movies</h2>
      <div class="browse-grid"></div>
    </section>
    {% if burningseries_enabled %}
    <section class="browse-section" data-row="burningseries_series" data-sites="burningseries">
      <h2 class="browse-heading" data-i18n="browse.recent_series">Recently Updated</h2>
      <div class="browse-grid"></div>
    </section>
    {% endif %}
    <section class="browse-section" data-row="cineby_movies" data-sites="cineby">
      <h2 class="browse-heading" data-i18n="browse.trending_movies">Trending Movies</h2>
      <div class="browse-grid"></div>
    </section>
    <section class="browse-section" data-row="mangafire_trending" data-sites="mangafire">
      <h2 class="browse-heading" data-i18n="browse.trending_manga">Trending Manga</h2>
      <div class="browse-grid"></div>
    </section>
    {% if htv_enabled %}
    <section class="browse-section" data-row="htv_trending" data-sites="htv">
      <h2 class="browse-heading" data-i18n="browse.trending_hentai">Trending</h2>
      <div class="browse-grid"></div>
    </section>
    {% endif %}
  </div>
</div>

<div class="overlay" id="seriesOverlay" data-close-on-backdrop>
  <div class="modal">
    <button class="modal-close" data-close-modal aria-label="Close">&times;</button>

    <!-- Shown until the title, seasons and first episode list are all in -->
    <div class="skeleton-view" id="seriesLoading" aria-live="polite" aria-busy="true">
      <div class="skeleton-header">
        <div class="skeleton skeleton-poster"></div>
        <div class="skeleton-meta">
          <div class="skeleton skeleton-title"></div>
          <div class="skeleton skeleton-line"></div>
          <div class="skeleton skeleton-line"></div>
          <div class="skeleton skeleton-line"></div>
          <div class="skeleton skeleton-line"></div>
        </div>
      </div>
      <div class="skeleton-controls">
        <div class="skeleton skeleton-field"></div>
        <div class="skeleton skeleton-field"></div>
      </div>
      <div class="skeleton-rows">
        <div class="skeleton skeleton-row"></div>
        <div class="skeleton skeleton-row"></div>
        <div class="skeleton skeleton-row"></div>
        <div class="skeleton skeleton-row"></div>
        <div class="skeleton skeleton-row"></div>
        <div class="skeleton skeleton-row"></div>
      </div>
      <div class="skeleton-status" data-i18n="index.loading_series">Loading title...</div>
    </div>

    <div id="seriesContent" hidden>
    <div class="series-header">
      <img id="seriesPoster" alt="" />
      <div class="series-meta">
        <h2 id="seriesTitle"></h2>
        <div class="series-genres" id="seriesGenres"></div>
        <div class="series-year" id="seriesYear"></div>
        <div class="series-desc" id="seriesDesc"></div>
      </div>
    </div>

    <div class="control-row" id="languageProviderRow">
      <label class="field">
        <span class="field-label" data-i18n="index.language">Language</span>
        <select id="languageSelect">
          {% for label in lang_labels.values() %}
          <option value="{{ label }}" {% if label == default_language %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="field">
        <span class="field-label" data-i18n="index.provider">Provider</span>
        <select id="providerSelect">
          {% for provider in supported_providers %}
          <option value="{{ provider }}">{{ provider }}</option>
          {% endfor %}
        </select>
      </label>
    </div>

    <div class="control-row" id="mangaFireRow" hidden>
      <label class="field">
        <span class="field-label" data-i18n="index.format">Format</span>
        <select id="mangaFireFormat">
          <option value="jpg">JPG (Images)</option>
          <option value="cbz">CBZ (Archive)</option>
        </select>
      </label>
    </div>

    <div class="control-row" id="customPathRow" hidden>
      <label class="field">
        <span class="field-label" data-i18n="index.download_folder">Download Folder</span>
        <select id="customPathSelect">
          <option value="" data-i18n="index.default">Default</option>
        </select>
      </label>
    </div>

    {% if is_admin %}
    <div class="control-row" id="autosyncRow" hidden>
      <label class="checkbox" style="margin-top:0">
        <input type="checkbox" id="autosyncExclude" />
        <span data-i18n="index.autosync_exclude">Exclude from Auto-Sync</span>
      </label>
    </div>
    {% endif %}

    <div class="episodes-header">
      <h3 data-i18n="index.episodes">Episodes</h3>
      <label class="checkbox">
        <input type="checkbox" id="selectAll" />
        <span data-i18n="index.select_all">Select All</span>
      </label>
    </div>

    <div class="season-accordion" id="seasonAccordion"></div>
    <div class="spinner" id="episodeSpinner" data-i18n="index.loading_episodes">Loading episodes...</div>

    <div class="modal-actions">
      <button class="btn btn-primary" id="downloadSelectedBtn" data-i18n="index.download_selected">
        Download Selected
      </button>
      <button class="btn btn-secondary" id="downloadAllBtn" data-i18n="index.download_all">Download All</button>
    </div>
    </div>
  </div>
</div>

<script>
  window.SITE_LANGUAGES = {
    aniworld: {{ lang_labels.values() | list | tojson }},
    sto: {{ sto_lang_labels.values() | list | tojson }},
    megakino: {{ megakino_lang_labels.values() | list | tojson }},
    kinox: ["German Dub", "English Dub"],
    burningseries: ["German Dub", "English Dub"],
    filmpalast: ["German Dub", "English Dub"],
    // Cineby only keeps German when /api/providers reports it for the title
    cineby: ["English Dub", "German Dub"]
  };
  window.DEFAULT_LANGUAGE = {{ default_language | tojson }};
  window.AUTOSYNC_ENABLED = {{ (autosync_enabled and is_admin) | tojson }};
  window.STATIC_PROVIDERS = {{ supported_providers | list | tojson }};
</script>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='home.js') }}?v={{ app_version }}"></script>
{% endblock %}