{% extends "base.html" %} {% block title %}Planned — AniWorld Downloader{%
endblock %} {% block content %}
<div class="settings-container" style="max-width: 1100px">
  <h1 data-i18n="planned.title">Planned Releases</h1>
  <p class="settings-hint" style="margin-bottom: 24px" data-i18n="planned.subtitle">
    Watch for movies or series that aren't out yet. Once they appear on the
    selected site, they are downloaded automatically.
  </p>

  <div class="settings-section">
    <h2 data-i18n="planned.add">Add Planned Item</h2>
    <div class="settings-row" style="gap: 10px; flex-wrap: wrap; align-items: flex-end">
      <div style="flex: 2; min-width: 180px">
        <label class="planned-label" data-i18n="planned.name">Title</label>
        <input type="text" id="plannedTitle" placeholder="e.g. Dune Part Three" />
      </div>
      <div style="flex: 1; min-width: 130px">
        <label class="planned-label" data-i18n="planned.type">Type</label>
        <select id="plannedType" class="sync-select">
          <option value="movie" data-i18n="planned.type_movie">Movie</option>
          <option value="series" data-i18n="planned.type_series">Series</option>
        </select>
      </div>
      <div style="flex: 1; min-width: 120px">
        <label class="planned-label" data-i18n="planned.language">Language</label>
        <select id="plannedLanguage" class="sync-select">
          <option>German Dub</option>
          <option>English Dub</option>
          <option>English Sub</option>
          <option>German Sub</option>
        </select>
      </div>
      <div style="flex: 1; min-width: 110px">
        <label class="planned-label" data-i18n="planned.provider">Provider</label>
        <select id="plannedProvider" class="sync-select">
          {% for p in available_providers %}
          <option value="{{ p }}">{{ p }}</option>
          {% endfor %}
        </select>
      </div>
      <div style="flex: 1; min-width: 130px">
        <label class="planned-label" data-i18n="index.download_folder">Download Folder</label>
        <select id="plannedPath" class="sync-select">
          <option value="" data-i18n="index.default">Default</option>
        </select>
      </div>
      <button onclick="addPlanned()" data-i18n="common.add">Add</button>
    </div>
    <label class="settings-checkbox" style="
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        font-size: 0.88rem;
        color: #c8cad0;
        cursor: pointer;
      ">
      <input type="checkbox" id="plannedAutoSync" style="accent-color: #2563eb; cursor: pointer" />
      <span data-i18n="planned.autosync_after">Keep series updated after first download</span>
    </label>
  </div>

  <div id="plannedList">
    <div class="queue-empty" id="plannedEmpty" data-i18n="planned.empty">
      Nothing planned yet.
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='planned.js') }}"></script>
{% endblock %}