{% extends "base.html" %}
{% block title %}Einstellungen — Dockhand Backup{% endblock %}

{% block content %}
<h1 class="text-xl font-semibold text-white mb-5">Einstellungen</h1>

<div class="grid gap-6 md:grid-cols-2">
  <!-- Schedule / retention -->
  <section class="rounded-lg border border-slate-800 bg-slate-900/40 p-4">
    <h2 class="font-medium text-white mb-3">Zeitplan &amp; Aufbewahrung</h2>
    <form method="post" action="{{ url_for('main.settings_view') }}" class="space-y-3">
      <div>
        <label class="block text-xs text-slate-400 mb-1">Cron-Ausdruck</label>
        <input name="schedule" value="{{ config.schedule }}"
          class="w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-sm font-mono">
        <p class="text-xs text-slate-500 mt-1">z.B. <code>0 3 * * *</code> = täglich 03:00 ({{ tz_name }}). Nächster Lauf:
          {{ next_run.strftime('%Y-%m-%d %H:%M %Z') if next_run else 'deaktiviert' }}</p>
      </div>
      <div>
        <label class="block text-xs text-slate-400 mb-1">Zeitzone (IANA, für Anzeige, Dateinamen &amp; Cron)</label>
        <input name="timezone" value="{{ config.timezone }}" placeholder="Europe/Berlin"
          class="w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-sm font-mono">
        <p class="text-xs text-slate-500 mt-1">Leer = <code>TZ</code>-Env-Var, sonst UTC. Aktiv: <span class="text-slate-300">{{ tz_name }}</span></p>
      </div>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="schedule_enabled" {{ 'checked' if config.schedule_enabled }}>
        Zeitplan aktiv
      </label>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="auto_discover" {{ 'checked' if config.auto_discover }}>
        Neue Stacks automatisch vor jedem Lauf übernehmen
      </label>
      <div>
        <label class="block text-xs text-slate-400 mb-1">Aufbewahrung (letzte N .tar pro Stack)</label>
        <input name="retention_n" type="number" min="0" value="{{ config.retention_n }}"
          class="w-32 rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-sm">
      </div>
      <div>
        <label class="block text-xs text-slate-400 mb-1">Dockhand-Stacks-Verzeichnis (compose/env liegen hier)</label>
        <input name="dockhand_stacks_base" value="{{ config.dockhand_stacks_base }}"
          placeholder="/mnt/user/appdata/dockhand/stacks"
          class="w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-sm font-mono">
      </div>
      <button class="rounded-md bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500">Speichern</button>
    </form>
  </section>

  <!-- Environment (read-only) -->
  <section class="rounded-lg border border-slate-800 bg-slate-900/40 p-4">
    <h2 class="font-medium text-white mb-3">Umgebung (aus Env-Vars)</h2>
    <dl class="text-sm space-y-2">
      <div class="flex justify-between gap-4"><dt class="text-slate-400">Dockhand-URL</dt><dd class="font-mono text-slate-300 truncate">{{ env.DOCKHAND_URL }}</dd></div>
      <div class="flex justify-between gap-4"><dt class="text-slate-400">Env-ID</dt><dd class="font-mono text-slate-300">{{ env.DOCKHAND_ENV_ID }}</dd></div>
      <div class="flex justify-between gap-4"><dt class="text-slate-400">Dockhand-Client</dt><dd class="font-mono text-slate-300">{{ env.dockhand_mode }}</dd></div>
      <div class="flex justify-between gap-4"><dt class="text-slate-400">Backup-Ziel</dt><dd class="font-mono text-slate-300 truncate">{{ env.backup_root }}</dd></div>
      <div class="flex justify-between gap-4"><dt class="text-slate-400">Daten-Verzeichnis</dt><dd class="font-mono text-slate-300 truncate">{{ env.data_dir }}</dd></div>
      <div class="flex justify-between gap-4"><dt class="text-slate-400">Dev-Modus</dt><dd class="font-mono {{ 'text-amber-300' if env.dev_mode else 'text-slate-300' }}">{{ env.dev_mode }}</dd></div>
      <div class="flex justify-between gap-4"><dt class="text-slate-400">OIDC-Login</dt><dd class="font-mono text-slate-300">{{ 'aktiv' if env.oidc else 'aus' }}</dd></div>
    </dl>
    <p class="text-xs text-slate-500 mt-3">Diese Werte werden über Container-Umgebungsvariablen gesetzt, nicht hier.</p>
  </section>
</div>

<!-- Custom paths -->
<section class="mt-6 rounded-lg border border-slate-800 bg-slate-900/40 p-4">
  <div class="flex items-center justify-between mb-3">
    <h2 class="font-medium text-white">Beliebige Pfade sichern</h2>
    <form method="post" action="{{ url_for('main.custom_run') }}"
          onsubmit="return confirm('Jetzt ein Backup der Custom-Pfade starten?');">
      <button class="rounded-md border border-slate-700 px-3 py-1.5 text-xs hover:bg-slate-800">Backup: Custom-Pfade</button>
    </form>
  </div>

  {% if config.custom_paths %}
  <ul class="divide-y divide-slate-800 mb-3">
    {% for c in config.custom_paths %}
    <li class="flex items-center gap-3 py-2 text-sm">
      <span class="font-medium text-slate-200">{{ c.label }}</span>
      <span class="font-mono text-slate-400 truncate">{{ c.path }}</span>
      <form method="post" action="{{ url_for('main.custom_delete', idx=loop.index0) }}" class="ml-auto">
        <button class="text-rose-400 hover:text-rose-300 text-xs">Entfernen</button>
      </form>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="text-sm text-slate-500 mb-3">Noch keine Custom-Pfade. Nützlich z.B. für das Dockhand-Stack-Verzeichnis oder andere Ordner.</p>
  {% endif %}

  <form method="post" action="{{ url_for('main.custom_add') }}" class="flex flex-wrap gap-2 items-end">
    <div>
      <label class="block text-xs text-slate-400 mb-1">Label</label>
      <input name="label" class="rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-sm" placeholder="dockhand-stacks">
    </div>
    <div class="flex-1 min-w-[240px]">
      <label class="block text-xs text-slate-400 mb-1">Pfad</label>
      <input name="path" class="w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-sm font-mono" placeholder="/mnt/user/appdata/dockhand">
    </div>
    <button class="rounded-md bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500">Hinzufügen</button>
  </form>
</section>
{% endblock %}