{% 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;">
        {{ _('Automatically search for new episodes and download them on a schedule.') }}
      </p>
    </div>
    <div class="autoSyncHeader" >
      <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>
        {{ _('Sync all') }}
      </button>
      <button class="btn btn-ghost autosync-hdr-btn" onclick="exportAutosync()" title="{{ _('Export all jobs as JSON') }}">
        <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="{{ _('Import jobs from JSON') }}">
        <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" class="chb-main chb-autosync-all" id="selectAllCheckbox" onchange="toggleSelectAll(this.checked)" />
      <span id="batchSelectionLabel">{{ _('0 selected') }}</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;">{{ _('Enable') }}</button>
    <button class="btn btn-ghost" onclick="batchAction('disable')" style="font-size:0.8rem;padding:5px 12px;">{{ _('Disable') }}</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="">{{ _('Default') }}</option>
      </select>
      <button class="btn btn-ghost" onclick="batchAction('set_path')" style="font-size:0.8rem;padding:5px 12px;">{{ _('Set path') }}</button>
    </div>
    <button class="btn btn-danger" onclick="batchAction('delete')" style="font-size:0.8rem;padding:5px 12px;">{{ _('Delete') }}</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">
        {{ _('No sync jobs yet. Add a series from the search page.') }}
      </div>
    </div>
  </div>
</div>

<!-- Edit Modal -->
<div class="overlay" id="editOverlay" onclick="if (event.target === this) closeEditModal();">
  <div class="modal editModal" id="editModal">
    <button class="close" onclick="closeEditModal()" aria-label="{{ _('Close') }}">
      <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">{{ _('Edit sync job') }}</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">{{ _('Language') }}</label>
      <select id="editLanguage" class="sync-select">
        <option>German Dub</option>
        <option>English Sub</option>
        <option>German Sub</option>
        <option>English Dub</option>
        <option>English Dub (German Sub)</option>
      </select>
    </div>
    <div class="settings-row" style="margin-bottom: 12px">
      <label class="settings-field-label" style="min-width: 80px">{{ _('Provider') }}</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">{{ _('Path') }}</label>
      <select id="editPath" class="sync-select">
        <option value="">{{ _('Default') }}</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">{{ _('Enabled') }}</option>
        <option value="0">{{ _('Disabled') }}</option>
      </select>
    </div>
    <div class="settings-row" style="margin-bottom: 4px">
      <label class="settings-field-label" style="min-width: 80px">{{ _('Path unavailable') }}</label>
      <select id="editPathUnavailableAction" class="sync-select">
        <option value="skip">{{ _('Skip sync') }}</option>
        <option value="hold">{{ _('Wait (Hold)') }}</option>
      </select>
    </div>
    <div class="editModalHint">
      <strong>{{ _('Skip:') }}</strong> {{ _('This sync run will be skipped. It will be retried on the next scheduled check.') }}<br>
      <strong>{{ _('Wait (Hold):') }}</strong> {{ _('The sync pauses until the custom path is reachable again — then starts automatically.') }}
    </div>
    <div class="modal-btn-row">
      <button class="btn btn-ghost" onclick="closeEditModal()">{{ _('Cancel') }}</button>
      <button class="btn btn-primary" onclick="saveEdit()">{{ _('Save') }}</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 %}