{% extends "base.html" %}
{% block titel %}{{ titel }} — {{ app_name }}{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold text-slate-900 mb-1">{{ titel }}</h1>
<p class="text-slate-600 mb-4 text-sm">
  Protokoll aller relevanten Ereignisse — nur für Administratoren sichtbar.
</p>

{% if fehler %}
  {% for meldung in fehler %}
  <div class="mb-3 rounded-lg border border-amber-300 bg-amber-50 text-amber-800 px-4 py-2 text-sm">
    {{ meldung }}
  </div>
  {% endfor %}
{% endif %}

<form method="get" action="/audit-log" class="bg-white rounded-xl border border-slate-200 p-4 mb-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 items-end">
    <label class="block text-sm">
      <span class="text-slate-500 block mb-1">Benutzer</span>
      <select name="benutzer"
              class="w-full border border-slate-300 rounded-lg px-2 py-2 bg-white focus-ring">
        <option value="">Alle</option>
        {% for name in benutzer_auswahl %}
        <option value="{{ name }}" {% if name == filter_benutzer %}selected{% endif %}>{{ name }}</option>
        {% endfor %}
      </select>
    </label>
    <label class="block text-sm">
      <span class="text-slate-500 block mb-1">Aktionstyp</span>
      <select name="aktion"
              class="w-full border border-slate-300 rounded-lg px-2 py-2 bg-white focus-ring">
        <option value="">Alle</option>
        {% for a in aktionen_auswahl %}
        <option value="{{ a }}" {% if a == filter_aktion %}selected{% endif %}>
          {{ aktionen_anzeige[a] or a }}
        </option>
        {% endfor %}
      </select>
    </label>
    <label class="block text-sm">
      <span class="text-slate-500 block mb-1">Von</span>
      <input type="date" name="von" value="{{ filter_von }}"
             class="w-full border border-slate-300 rounded-lg px-2 py-2 focus-ring">
    </label>
    <label class="block text-sm">
      <span class="text-slate-500 block mb-1">Bis</span>
      <input type="date" name="bis" value="{{ filter_bis }}"
             class="w-full border border-slate-300 rounded-lg px-2 py-2 focus-ring">
    </label>
    <div class="flex gap-2">
      <button type="submit"
              class="bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg px-4 py-2 text-sm font-medium">
        Filtern
      </button>
      <a href="/audit-log"
         class="border border-slate-300 hover:bg-slate-50 rounded-lg px-4 py-2 text-sm text-slate-600">
        Zurücksetzen
      </a>
    </div>
  </div>
</form>

<div class="bg-white rounded-xl border border-slate-200 overflow-auto max-h-[70vh]">
  <table class="w-full text-sm">
    <thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
      <tr>
        <th class="px-4 py-2 font-medium whitespace-nowrap text-xs uppercase tracking-wider">Zeitpunkt</th>
        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Benutzer</th>
        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Aktion</th>
        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Objekt</th>
        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">Änderung / Details</th>
        <th class="px-4 py-2 font-medium text-xs uppercase tracking-wider">IP</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for e in eintraege %}
      <tr class="align-top">
        <td class="px-4 py-2 text-slate-500 whitespace-nowrap">
          {{ e.erstellt_am.strftime('%d.%m.%Y %H:%M:%S') if e.erstellt_am else '&ndash;' }}
        </td>
        <td class="px-4 py-2 font-medium">{{ e.actor_name }}</td>
        <td class="px-4 py-2">{{ aktionen_anzeige[e.action] or e.action }}</td>
        <td class="px-4 py-2">
          {{ e.objekt_typ }}{% if e.objekt_id %} #{{ e.objekt_id }}{% endif %}
        </td>
        <td class="px-4 py-2 max-w-md">
          {% if e.alt or e.neu %}
          <details>
            <summary class="cursor-pointer text-xs text-emerald-700 hover:text-emerald-900 select-none">Änderungen anzeigen</summary>
            {% if e.alt %}<div class="mt-1 mb-1"><span class="text-slate-400 text-xs">Alt:</span>
              <pre class="font-mono text-[11px] bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.alt | json_schoen }}</pre></div>{% endif %}
            {% if e.neu %}<div class="mt-1"><span class="text-slate-400 text-xs">Neu:</span>
              <pre class="font-mono text-[11px] bg-emerald-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.neu | json_schoen }}</pre></div>{% endif %}
          </details>
          {% elif e.details %}
          <details>
            <summary class="cursor-pointer text-xs text-emerald-700 hover:text-emerald-900 select-none">Details anzeigen</summary>
            <pre class="mt-1 font-mono text-[11px] bg-slate-50 rounded p-1 overflow-x-auto whitespace-pre-wrap">{{ e.details | json_schoen }}</pre>
          </details>
          {% else %}
            <span class="text-slate-400">&ndash;</span>
          {% endif %}
        </td>
        <td class="px-4 py-2 text-slate-500">{{ e.ip_adresse or '&ndash;' }}</td>
      </tr>
      {% else %}
      <tr>
        <td colspan="6" class="px-4 py-8 text-center text-slate-500">
          Keine Einträge gefunden.
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="flex items-center justify-between mt-3 text-sm text-slate-600">
  <p>
    {% if gesamt %}
      Zeige {{ start }}&ndash;{{ ende }} von {{ gesamt }} Einträgen
    {% else %}
      0 Einträge
    {% endif %}
  </p>
</div>
{% from "seitennavigation.html" import seitennavigation %}
{{ seitennavigation(seiten_url, seite, gesamt_seiten) }}
{% endblock %}