{% extends "base.html" %}
{% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
<p class="text-slate-600 max-w-3xl mb-4">
  Sicherungsdatei der Redaktion: Titel, deren Erscheinungs- bzw. Eintragsdatum
  mehr als 12 Monate zur&uuml;ckliegt, werden t&auml;glich automatisch aus den
  aktiven Listen hierher verschoben. Es geht nichts verloren &mdash; jeder
  Eintrag l&auml;sst sich unver&auml;ndert zur&uuml;ck in die aktive Liste verschieben.
</p>

<div class="flex items-center gap-4 mb-4 text-xs text-slate-500">
  <span class="inline-flex items-center gap-1.5">
    <span class="w-2 h-2 rounded-full {{ 'bg-emerald-500' if job_aktiv else 'bg-slate-300' }}"></span>
    T&auml;glicher Archiv-Job: {{ 'aktiv' if job_aktiv else 'aus' }}
  </span>
  <span>{{ anzahl_neuheiten }} archivierte Neuheiten</span>
  <span>{{ anzahl_planung }} archivierte Planungseintr&auml;ge</span>
</div>

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

<div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
  <form method="get" action="/archiv" class="grid grid-cols-1 gap-3 sm:flex sm:flex-wrap sm:items-end">
    <div class="sm:w-64 lg:w-72">
      <label for="q" class="block text-xs font-medium text-slate-500 mb-1">Suche (Titel, Verlag, Autor)</label>
      <input type="text" id="q" name="q" value="{{ q }}"
             class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
    <div class="sm:w-48">
      <label for="quelle" class="block text-xs font-medium text-slate-500 mb-1">Herkunft</label>
      <select id="quelle" name="quelle"
              class="w-full sm:w-auto min-h-[44px] md:min-h-0 border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
              onchange="this.form.submit()">
        <option value="">Alle Listen</option>
        <option value="neuheiten" {% if quelle_filter == 'neuheiten' %}selected{% endif %}>Neuheiten</option>
        <option value="planung" {% if quelle_filter == 'planung' %}selected{% endif %}>Planung</option>
      </select>
    </div>
    <button type="submit"
            class="w-full sm:w-auto min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
      Suchen
    </button>
    {% if q or quelle_filter %}
    <a href="/archiv" class="text-sm text-slate-500 hover:text-emerald-700 px-2 py-2">Zur&uuml;cksetzen</a>
    {% endif %}
  </form>
</div>

<p class="text-xs text-slate-400 mb-3">{{ anzahl }} Eintr&auml;ge im Archiv</p>

<!-- Mobil (<768px): Karten-Ansicht — Cover links, Titel+Metadaten rechts, Status oben -->
<ul class="md:hidden space-y-3" role="list">
  {% for eintrag in eintraege %}
  <li class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 flex gap-3">
    <div class="pt-0.5">
      {% set cover_bild = eintrag.bild_url %}
      {% set cover_titel = eintrag.titel %}
      {% include "archiv/_cover.html" %}
    </div>
    <div class="min-w-0 flex-1">
      <div class="flex items-start gap-2">
        <h3 class="text-sm font-medium leading-snug break-words">
          {{ eintrag.titel }}
          {% if eintrag.bgg_id %}
          <a href="https://boardgamegeek.com/boardgame/{{ eintrag.bgg_id }}" target="_blank" rel="noopener"
             class="ml-0.5 text-[10px] text-slate-400 hover:text-emerald-700 align-super">BGG&nbsp;{{ eintrag.bgg_id }}</a>
          {% endif %}
        </h3>
        {% if eintrag.quelle == 'neuheiten' %}
        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 text-xs">Neuheiten</span>
        {% else %}
        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-violet-100 text-violet-800 text-xs">Planung</span>
        {% endif %}
      </div>
      <dl class="mt-1.5 space-y-0.5 text-xs text-slate-500">
        {% if eintrag.verlag %}<div><dt class="inline font-medium text-slate-400">Verlag: </dt><dd class="inline">{{ eintrag.verlag }}</dd></div>{% endif %}
        {% if eintrag.jahr or eintrag.ausgabe %}<div><dt class="inline font-medium text-slate-400">Jahr/Ausgabe: </dt><dd class="inline">{{ eintrag.jahr if eintrag.jahr else eintrag.ausgabe }}</dd></div>{% endif %}
        <div><dt class="inline font-medium text-slate-400">Status: </dt><dd class="inline">{% from "status.html" import status_badge %}{{ status_badge(eintrag.status, status_anzeige.get(eintrag.status, eintrag.status)) }}</dd></div>
        <div>
          <dt class="inline font-medium text-slate-400">Archiviert am: </dt>
          <dd class="inline">{{ eintrag.archiviert_am.strftime('%d.%m.%Y %H:%M') if eintrag.archiviert_am else '—' }}</dd>
        </div>
        <div><dt class="inline font-medium text-slate-400">Grund: </dt><dd class="inline">{{ eintrag.grund }}</dd></div>
      </dl>
      <form method="post" action="/archiv/{{ eintrag.quelle }}/{{ eintrag.id }}/wiederherstellen" class="mt-2">
        <button type="submit"
                class="w-full min-h-[44px] inline-flex items-center justify-center gap-1 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap"
                title="Eintrag unverändert zurück in die aktive Liste verschieben">
          {% from "icons.html" import icon_sync %}{{ icon_sync("h-4 w-4") }} Wiederherstellen
        </button>
      </form>
    </div>
  </li>
  {% else %}
  <li class="bg-white rounded-xl border border-slate-200 shadow-sm px-4 py-8 text-center text-sm text-slate-400">
    {% if q or quelle_filter %}
    Keine Treffer f&uuml;r diese Suche.
    {% else %}
    Das Archiv ist leer — nichts zu sehen.
    {% endif %}
  </li>
  {% endfor %}
</ul>

<div class="hidden md:block overflow-auto max-h-[70vh] bg-white rounded-xl border border-slate-200 shadow-sm">
  <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-3 font-medium">Cover</th>
        <th class="px-4 py-3 font-medium">Spieltitel</th>
        <th class="px-4 py-3 font-medium">Herkunft</th>
        <th class="px-4 py-3 font-medium">Verlag</th>
        <th class="px-4 py-3 font-medium">Jahr / Ausgabe</th>
        <th class="px-4 py-3 font-medium">Status</th>
        <th class="px-4 py-3 font-medium">Rezensent</th>
        <th class="px-4 py-3 font-medium">Archiviert am</th>
        <th class="px-4 py-3 font-medium">Grund</th>
        <th class="px-4 py-3 font-medium">Aktionen</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for eintrag in eintraege %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          {% set cover_bild = eintrag.bild_url %}
          {% set cover_titel = eintrag.titel %}
          {% include "archiv/_cover.html" %}
        </td>
        <td class="px-4 py-3 font-medium">
          {{ eintrag.titel }}
          {% if eintrag.bgg_id %}
          <a href="https://boardgamegeek.com/boardgame/{{ eintrag.bgg_id }}" target="_blank" rel="noopener"
             class="ml-1 text-[10px] text-slate-400 hover:text-emerald-700 align-super">BGG&nbsp;{{ eintrag.bgg_id }}</a>
          {% endif %}
        </td>
        <td class="px-4 py-3 whitespace-nowrap">
          {% if eintrag.quelle == 'neuheiten' %}
          <span class="inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 text-xs">Neuheiten</span>
          {% else %}
          <span class="inline-block px-2 py-0.5 rounded-full bg-violet-100 text-violet-800 text-xs">Planung</span>
          {% endif %}
        </td>
        <td class="px-4 py-3">{{ eintrag.verlag or '—' }}</td>
        <td class="px-4 py-3 whitespace-nowrap">{{ eintrag.jahr if eintrag.jahr else (eintrag.ausgabe or '—') }}</td>
        <td class="px-4 py-3 whitespace-nowrap">{% from "status.html" import status_badge %}{{ status_badge(eintrag.status, status_anzeige.get(eintrag.status, eintrag.status)) }}</td>
        <td class="px-4 py-3 whitespace-nowrap">{{ namen.get(eintrag.rezensent_id, '—') if eintrag.rezensent_id else '—' }}</td>
        <td class="px-4 py-3 whitespace-nowrap text-slate-500">
          {{ eintrag.archiviert_am.strftime('%d.%m.%Y %H:%M') if eintrag.archiviert_am else '—' }}
        </td>
        <td class="px-4 py-3 text-slate-500">{{ eintrag.grund }}</td>
        <td class="px-4 py-3">
          <form method="post" action="/archiv/{{ eintrag.quelle }}/{{ eintrag.id }}/wiederherstellen">
            <button type="submit"
                    class="inline-flex items-center gap-1 text-xs bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-2.5 py-2 rounded-lg whitespace-nowrap"
                    title="Eintrag unverändert zurück in die aktive Liste verschieben">
              {% from "icons.html" import icon_sync %}{{ icon_sync("h-4 w-4") }} Wiederherstellen
            </button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="10" class="px-4 py-8 text-center text-slate-400">
          {% if q or quelle_filter %}
          Keine Treffer f&uuml;r diese Suche.
          {% else %}
          Das Archiv ist leer — nichts zu sehen.
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}