{% extends "base.html" %}
{% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
{% block inhalt %}
<div class="flex flex-wrap items-center gap-3 mb-1">
  <h1 class="text-2xl font-bold">{{ titel }}</h1>
  <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium
               {% if ungelesen %}bg-red-100 text-red-700{% else %}bg-slate-200 text-slate-500{% endif %}">
    {{ ungelesen }} ungelesen
  </span>
</div>
<p class="text-slate-600 mb-4">
  Zustellung aktuell &uuml;ber:
  {% if gewaehlte_kanaelle %}<span class="font-medium">{{ gewaehlte_kanaelle|join(", ") }}</span>
  {% else %}<span class="text-red-600">kein Kanal ausgew&auml;hlt</span>{% endif %}
</p>

<div class="flex flex-wrap gap-2 mb-6">
  <form method="post" action="/benachrichtigung/alle-gelesen">
    <button type="submit" class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700">
      Alle als gelesen markieren
    </button>
  </form>
  <a href="/benachrichtigung/einstellungen"
     class="px-3 py-1.5 rounded-lg border border-slate-300 bg-white text-sm font-medium hover:bg-slate-50">
    Kan&auml;le &amp; Einstellungen
  </a>
</div>

{% if mitteilungen %}
<div class="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
  {% for m in mitteilungen %}
  <div class="px-4 py-3 flex flex-col gap-1 {% if not m.gelesen %}border-l-4 border-l-emerald-500{% endif %}">
    <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
      <span class="{% if m.gelesen %}text-slate-600{% else %}font-semibold text-slate-900{% endif %}">{{ m.titel }}</span>
      <span class="text-xs uppercase tracking-wide bg-slate-100 text-slate-500 rounded px-1.5 py-0.5">{{ m.kategorie }}</span>
      <span class="text-xs text-slate-400 ml-auto">{{ m.created_at.strftime('%d.%m.%Y %H:%M') }}</span>
    </div>
    <p class="text-sm text-slate-600 whitespace-pre-line">{{ m.text }}</p>
    <div class="text-xs">
      {% if m.gelesen %}
        <span class="text-slate-400">Gelesen</span>
      {% else %}
        <form method="post" action="/benachrichtigung/{{ m.id }}/gelesen">
          <button type="submit" class="text-emerald-700 hover:underline">Als gelesen markieren</button>
        </form>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<p class="text-slate-500 bg-white rounded-xl border border-slate-200 px-4 py-8 text-center">
  Keine Benachrichtigungen vorhanden.
</p>
{% endif %}
{% endblock %}