{% extends "base.html" %}
{% block title %}Paramètres{% endblock %}

{% block content %}
<div class="max-w-xl">
  <h1 class="text-xl font-bold text-gray-900 mb-6">Paramètres</h1>

  <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-3 mb-6">
    <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">API — Token d'accès</h2>
    <p class="text-xs text-gray-500">
      Communiquez ce token aux autres instances BackupManager pour qu'elles puissent se connecter à celle-ci.
    </p>
    <div class="flex items-center gap-2">
      <input type="text" id="api-token" readonly value="{{ api_token }}"
             class="flex-1 border border-gray-200 bg-gray-50 rounded-lg px-3 py-2 text-sm font-mono text-gray-700 focus:outline-none select-all">
      <button type="button" onclick="copyToken()"
              class="shrink-0 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-3 py-2 rounded-lg border border-gray-200 transition">
        Copier
      </button>
    </div>
    {% if instance_url %}
    <p class="text-xs text-gray-400">
      URL de cette instance : <span class="font-mono">{{ instance_url }}</span>
    </p>
    {% endif %}
  </div>

  <form method="post" class="space-y-6">

    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
      <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Serveur SMTP</h2>

      <div class="grid grid-cols-3 gap-3">
        <div class="col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Hôte SMTP</label>
          <input type="text" name="smtp_host" value="{{ cfg.smtp_host }}"
                 placeholder="smtp.exemple.fr"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Port</label>
          <input type="number" name="smtp_port" min="1" max="65535"
                 value="{{ cfg.smtp_port or 587 }}"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Utilisateur</label>
          <input type="text" name="smtp_user" value="{{ cfg.smtp_user }}"
                 placeholder="user@exemple.fr"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
          <input type="password" name="smtp_password" value="{{ cfg.smtp_password }}"
                 placeholder="••••••••"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
      </div>

      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Expéditeur (From)</label>
          <input type="email" name="smtp_from" value="{{ cfg.smtp_from }}"
                 placeholder="backup@exemple.fr"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
          <p class="text-xs text-gray-400 mt-1">Si vide, utilise l'utilisateur SMTP.</p>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Destinataire (To)</label>
          <input type="email" name="smtp_to" value="{{ cfg.smtp_to }}"
                 placeholder="admin@exemple.fr"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
      </div>

      <div class="flex items-center gap-6">
        <label class="flex items-center gap-2">
          <input type="checkbox" name="smtp_tls" value="1"
                 {% if cfg.smtp_tls == '1' %}checked{% endif %}
                 class="rounded border-gray-300 text-blue-600">
          <span class="text-sm font-medium text-gray-700">STARTTLS</span>
        </label>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="smtp_ssl" value="1"
                 {% if cfg.smtp_ssl == '1' %}checked{% endif %}
                 class="rounded border-gray-300 text-blue-600">
          <span class="text-sm font-medium text-gray-700">SSL/TLS direct (port 465)</span>
        </label>
      </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-3">
      <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Déclenchement</h2>

      <label class="flex items-center gap-2">
        <input type="checkbox" name="notify_on_error" value="1"
               {% if cfg.notify_on_error != '0' %}checked{% endif %}
               class="rounded border-gray-300 text-blue-600">
        <span class="text-sm font-medium text-gray-700">Notifier en cas d'erreur</span>
      </label>

      <label class="flex items-center gap-2">
        <input type="checkbox" name="notify_on_success" value="1"
               {% if cfg.notify_on_success == '1' %}checked{% endif %}
               class="rounded border-gray-300 text-blue-600">
        <span class="text-sm font-medium text-gray-700">Notifier en cas de succès</span>
      </label>
    </div>

    <div class="flex gap-3 flex-wrap">
      <button type="submit" name="action" value="save"
              class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-medium text-sm transition">
        Enregistrer
      </button>

      <button type="submit" name="action" value="test_smtp"
              class="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 px-5 py-2 rounded-lg font-medium text-sm transition">
        Envoyer un email de test
      </button>
    </div>

  </form>
</div>

<script>
function copyToken() {
  const input = document.getElementById('api-token');
  navigator.clipboard.writeText(input.value).then(() => {
    const btn = event.target;
    btn.textContent = 'Copié !';
    setTimeout(() => btn.textContent = 'Copier', 2000);
  });
}
</script>
{% endblock %}