{% extends "base.html" %}
{% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold mb-1">Benachrichtigungen &mdash; Einstellungen</h1>
<p class="text-slate-600 mb-4">
  W&auml;hlen Sie, &uuml;ber welche Kan&auml;le Sie Benachrichtigungen erhalten.
  Mehrere Kan&auml;le sind gleichzeitig m&ouml;glich.
</p>

<a href="/benachrichtigung" class="text-sm text-emerald-700 hover:underline">&larr; Zur&uuml;ck zum Posteingang</a>

{% if gespeichert %}
<div class="mt-4 mb-2 rounded-lg bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-2 text-sm">
  Einstellungen gespeichert.
</div>
{% endif %}
{% if fehler %}
<div class="mt-4 mb-2 rounded-lg bg-red-50 border border-red-200 text-red-800 px-4 py-2 text-sm" role="alert" tabindex="-1">
  {{ fehler }}
</div>
{% endif %}

<form method="post" action="/benachrichtigung/einstellungen"
      class="mt-4 bg-white rounded-xl border border-slate-200 p-5 max-w-2xl space-y-5">

  <fieldset>
    <legend class="text-sm font-semibold mb-2">Kan&auml;le</legend>
    <div class="space-y-2">
      {% for schluessel, status in kanal_status.items() %}
      <label class="flex items-start gap-3 p-2 rounded hover:bg-slate-50 cursor-pointer">
        <input type="checkbox" name="kanaele" value="{{ schluessel }}"
               {% if schluessel in gewaehlte %}checked{% endif %}
               class="mt-1 h-4 w-4 accent-emerald-600">
        <span>
          <span class="font-medium">{{ status.label }}</span>
          {% if status.aktiv %}
            <span class="ml-1 text-xs bg-emerald-100 text-emerald-700 rounded px-1.5 py-0.5">konfiguriert</span>
          {% else %}
            <span class="ml-1 text-xs bg-amber-100 text-amber-700 rounded px-1.5 py-0.5">nicht konfiguriert &mdash; nur Serverprotokoll</span>
          {% endif %}
          {% if schluessel == 'email' %}
            <span class="block text-sm text-slate-500">Versand &uuml;ber SMTP; ohne Mailserver erscheint die Nachricht im Protokoll.</span>
          {% elif schluessel == 'telegram' %}
            <span class="block text-sm text-slate-500">Bot-Token wird zentral gesetzt (Umgebungsvariable), die Chat-ID hinterlegen Sie hier.</span>
          {% elif schluessel == 'inapp' %}
            <span class="block text-sm text-slate-500">Nachricht erscheint im Posteingang des Portals.</span>
          {% endif %}
        </span>
      </label>
      {% endfor %}
    </div>
  </fieldset>

  <div>
    <label for="emailadresse" class="block text-sm font-semibold mb-1">E-Mail-Adresse</label>
    <input id="emailadresse" name="emailadresse" type="email" value="{{ emailadresse }}"
           placeholder="name@example.org"
           class="w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
  </div>

  <div>
    <label for="telegram_chat_id" class="block text-sm font-semibold mb-1">Telegram-Chat-ID</label>
    <input id="telegram_chat_id" name="telegram_chat_id" value="{{ telegram_chat_id }}"
           placeholder="z. B. 123456789 (Gruppen mit Minus)"
           class="w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
  </div>

  <div class="flex items-center gap-3">
    <button type="submit" class="w-full sm:w-auto min-h-[44px] inline-flex items-center justify-center px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 active:bg-emerald-800">
      Speichern
    </button>
    <span class="text-xs text-slate-400">Ohne ausgew&auml;hlten Kanal erhalten Sie keine Benachrichtigungen.</span>
  </div>
</form>
{% endblock %}