{% extends "base.html" %} {% block title %}Auto-Sync — AniWorld Downloader{% endblock %}
{% block content %}
<div class="autosync-container">
  <div class="page-header" style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px;">
    <div>
      <h1 class="page-title" style="margin:0;">Auto-Sync</h1>
      <p class="autosync-intro" style="margin:4px 0 0;">
        Automatisch nach neuen Episoden suchen und diese nach einem Zeitplan herunterladen.
      </p>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
      <button class="btn btn-primary" id="syncAllBtn" onclick="syncAll()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;">
          <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
        </svg>
        Alle synchronisieren
      </button>
      <button class="btn btn-ghost autosync-hdr-btn" onclick="exportAutosync()" title="Alle Jobs als JSON exportieren">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px;flex-shrink:0;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Export
      </button>
      <label class="btn btn-ghost autosync-hdr-btn autosync-import-lbl" title="Jobs aus JSON importieren">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px;flex-shrink:0;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 5 17 10"/><line x1="12" y1="5" x2="12" y2="17"/></svg>
        Import
        <input type="file" id="importFileInput" accept=".json" style="display:none;" onchange="importAutosync(this)" />
      </label>
    </div>
  </div>

  <!-- Batch toolbar (shown when checkboxes are selected) -->
  <div id="batchToolbar" style="display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;background:var(--bg-elevated,#1a1a28);border:1px solid var(--border);border-radius:var(--radius-md);">
    <label style="display:flex;align-items:center;gap:7px;font-size:0.82rem;cursor:pointer;user-select:none;">
      <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this.checked)" />
      <span id="batchSelectionLabel">0 ausgewählt</span>
    </label>
    <div style="flex:1;min-width:1px;"></div>
    <button class="btn btn-ghost" onclick="batchAction('enable')" style="font-size:0.8rem;padding:5px 12px;">Aktivieren</button>
    <button class="btn btn-ghost" onclick="batchAction('disable')" style="font-size:0.8rem;padding:5px 12px;">Deaktivieren</button>
    <div style="display:flex;align-items:center;gap:6px;">
      <select id="batchPathSelect" style="height:32px;padding:0 8px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.8rem;font-family:inherit;cursor:pointer;">
        <option value="">Standard</option>
      </select>
      <button class="btn btn-ghost" onclick="batchAction('set_path')" style="font-size:0.8rem;padding:5px 12px;">Pfad setzen</button>
    </div>
    <button class="btn btn-danger" onclick="batchAction('delete')" style="font-size:0.8rem;padding:5px 12px;">Löschen</button>
    <button class="btn btn-ghost" onclick="clearSelection()" style="font-size:0.8rem;padding:5px 10px;opacity:.6;">✕</button>
  </div>

  <div class="autosync-table-wrap">
    <div id="autosyncList">
      <div class="queue-empty" id="autosyncEmpty">
        Noch keine Sync-Jobs. Füge eine Serie über die Suchseite hinzu.
      </div>
    </div>
  </div>
</div>

<!-- Edit Modal -->
<div class="overlay" id="editOverlay" onclick="if (event.target === this) closeEditModal();">
  <div class="modal" id="editModal" style="max-width: 520px">
    <button class="close" onclick="closeEditModal()" aria-label="Schließen">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
    <h2 style="margin-bottom: 4px">Sync-Job bearbeiten</h2>
    <div id="editJobTitle" class="modal-info-text" style="margin-bottom:18px;"></div>
    <input type="hidden" id="editJobId" />
    <div class="settings-row" style="margin-bottom: 12px">
      <label class="settings-field-label" style="min-width: 80px">Sprache</label>
      <select id="editLanguage" class="sync-select">
        <option>German Dub</option>
        <option>English Sub</option>
        <option>German Sub</option>
      </select>
    </div>
    <div class="settings-row" style="margin-bottom: 12px">
      <label class="settings-field-label" style="min-width: 80px">Anbieter</label>
      <select id="editProvider" class="sync-select">
        <option>VOE</option>
        <option>Vidmoly</option>
        <option>Vidoza</option>
      </select>
    </div>
    <div class="settings-row" style="margin-bottom: 12px">
      <label class="settings-field-label" style="min-width: 80px">Pfad</label>
      <select id="editPath" class="sync-select">
        <option value="">Standard</option>
      </select>
    </div>
    <div class="settings-row" style="margin-bottom: 12px">
      <label class="settings-field-label" style="min-width: 80px">Status</label>
      <select id="editEnabled" class="sync-select">
        <option value="1">Aktiviert</option>
        <option value="0">Deaktiviert</option>
      </select>
    </div>
    <div class="settings-row" style="margin-bottom: 4px">
      <label class="settings-field-label" style="min-width: 80px">Pfad nicht erreichbar</label>
      <select id="editPathUnavailableAction" class="sync-select">
        <option value="skip">Sync überspringen</option>
        <option value="hold">Warten (Hold)</option>
      </select>
    </div>
    <div style="margin-bottom:18px;padding:0 0 0 calc(80px + 12px);font-size:0.78rem;color:var(--text-muted);line-height:1.5;">
      <strong>Überspringen:</strong> Dieser Sync-Durchlauf wird ausgelassen. Beim nächsten geplanten Check wird es erneut versucht.<br>
      <strong>Warten (Hold):</strong> Der Sync pausiert solange bis der Custom Path wieder erreichbar ist — danach startet er automatisch.
    </div>
    <div class="modal-btn-row">
      <button class="btn btn-ghost" onclick="closeEditModal()">Abbrechen</button>
      <button class="btn btn-primary" onclick="saveEdit()">Speichern</button>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
{% set is_admin = not auth_enabled or (current_user and current_user.role == 'admin') %}
<script>var autosyncCanManage = {{ 'true' if is_admin else 'false' }};</script>
<script src="{{ url_for('static', filename='autosync.js') }}"></script>
{% endblock %}