{% extends "base.html" %}
{% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
{% block inhalt %}
<div x-data="{ loeschFormular: null, loeschTitel: '' }">
<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
<p class="text-slate-600 mb-4">
  Planungsliste der Redaktion: wer reviewt welches Spiel f&uuml;r welche Ausgabe.
  Jede Eintragung &mdash; aus den Neuheiten verschoben oder h&auml;ndisch nachgetragen &mdash;
  wird automatisch durch die Dedup-Pr&uuml;fung gepr&uuml;ft.
</p>

{% 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">
  <h2 class="font-semibold mb-3">Titel h&auml;ndisch nachtragen</h2>
  <!-- Mobil: Felder untereinander vollbreit; ab sm: flexibel nebeneinander -->
  <form method="post" action="/planung/neu" 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="titel" class="block text-xs font-medium text-slate-500 mb-1">Spieltitel *</label>
      <input type="text" id="titel" name="titel" required aria-required="true"
             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 lg:w-52">
      <label for="verlag" class="block text-xs font-medium text-slate-500 mb-1">Verlag</label>
      <input type="text" id="verlag" name="verlag"
             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-32">
      <label for="ausgabe" class="block text-xs font-medium text-slate-500 mb-1">Ausgabe</label>
      <input type="text" id="ausgabe" name="ausgabe" placeholder="z. B. 3/2025"
             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-32">
      <label for="bgg_id" class="block text-xs font-medium text-slate-500 mb-1">BGG-ID (optional)</label>
      <input type="text" id="bgg_id" name="bgg_id" inputmode="numeric"
             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>
    <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">
      Pr&uuml;fen &amp; eintragen
    </button>
  </form>
</div>

<div class="flex items-center mb-3 gap-3">
  <form method="get" action="/planung" class="flex items-center gap-2">
    <select name="status" class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white min-h-[44px] md:min-h-0"
            onchange="this.form.submit()">
      <option value="">Alle Status</option>
      {% for wert in status_optionen %}
      <option value="{{ wert }}" {% if wert == status_filter %}selected{% endif %}>{{ status_anzeige[wert] }}</option>
      {% endfor %}
    </select>
    <noscript><button type="submit" class="bg-slate-200 hover:bg-slate-300 px-3 py-2 rounded-lg text-sm min-h-[44px] md:min-h-0">Filtern</button></noscript>
  </form>
  <p class="text-xs text-slate-400 ml-auto">{{ anzahl }} Eintr&auml;ge</p>
</div>

<!-- 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 "planung/_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>
          {% elif eintrag.quellen_url %}
          <a href="{{ eintrag.quellen_url }}" target="_blank" rel="noopener"
             title="Zur Quelle ({{ eintrag.quelle }})"
             class="ml-0.5 text-[10px] uppercase tracking-wide text-sky-600/70 hover:text-sky-800 align-super">{{ eintrag.quelle }}&nbsp;↗</a>
          {% endif %}
          {% if eintrag.pruefung %}
          <span class="ml-0.5 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-xs align-middle"
                title="Die dedup-Prüfung hatte beim Eintragen Treffer.">{% from "icons.html" import icon_warnung %}{{ icon_warnung("h-3.5 w-3.5") }} Pr&uuml;fhinweis</span>
          {% endif %}
        </h3>
        {% from "status.html" import status_badge %}{{ status_badge(eintrag.status, status_anzeige[eintrag.status], "ml-auto shrink-0") }}
      </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.ausgabe %}<div><dt class="inline font-medium text-slate-400">Ausgabe: </dt><dd class="inline">{{ eintrag.ausgabe }}</dd></div>{% endif %}
        <div><dt class="inline font-medium text-slate-400">Rezensent: </dt><dd class="inline">{{ namen.get(eintrag.rezensent_id, '—') }}</dd></div>
        <div>
          <dt class="inline font-medium text-slate-400">Aktualisiert: </dt>
          <dd class="inline">{{ eintrag.aktualisiert_am.strftime('%d.%m.%Y %H:%M') if eintrag.aktualisiert_am else '—' }}</dd>
        </div>
      </dl>
      {% if kann_bearbeiten(eintrag) %}
      <div class="mt-2 grid grid-cols-1 gap-2">
        {% if eintrag.status == 'offen' %}
        <form method="post" action="/planung/{{ eintrag.id }}/status">
          <input type="hidden" name="status" value="in_bearbeitung">
          <button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center bg-sky-600 hover:bg-sky-700 active:bg-sky-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap">In Bearbeitung</button>
        </form>
        {% endif %}
        {% if eintrag.status != 'abgeschlossen' %}
        <form method="post" action="/planung/{{ eintrag.id }}/status">
          <input type="hidden" name="status" value="abgeschlossen">
          <button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap">Abgeschlossen</button>
        </form>
        {% endif %}
        <a href="/planung/{{ eintrag.id }}/bearbeiten"
           class="min-h-[44px] inline-flex items-center justify-center border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-3 py-2 rounded-lg text-sm whitespace-nowrap">Bearbeiten</a>
        <form method="post" action="/planung/{{ eintrag.id }}/loeschen"
        data-titel="{{ eintrag.titel }}"
        @submit.prevent="loeschTitel = $event.target.dataset.titel; loeschFormular = $event.target">
          <button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center border border-red-200 text-red-600 hover:bg-red-50 px-3 py-2 rounded-lg text-sm whitespace-nowrap">L&ouml;schen</button>
        </form>
      </div>
      {% else %}
      <p class="mt-2 text-xs text-slate-400">nur {{ namen.get(eintrag.rezensent_id, '') }}</p>
      {% endif %}
    </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">
    Noch keine Eintr&auml;ge — schiebe einen Titel aus den Neuheiten hierher oder trage ihn oben h&auml;ndisch nach.
  </li>
  {% endfor %}
</ul>

<!-- Desktop/Tablet (&ge;768px): Tabellenform -->
<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-left text-slate-500">
      <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">Verlag</th>
        <th class="px-4 py-3 font-medium">Ausgabe</th>
        <th class="px-4 py-3 font-medium">Rezensent</th>
        <th class="px-4 py-3 font-medium">Status</th>
        <th class="px-4 py-3 font-medium">Aktualisiert</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 "planung/_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>
          {% elif eintrag.quellen_url %}
          <a href="{{ eintrag.quellen_url }}" target="_blank" rel="noopener"
             title="Zur Quelle ({{ eintrag.quelle }})"
             class="ml-1 text-[10px] uppercase tracking-wide text-sky-600/70 hover:text-sky-800 align-super">{{ eintrag.quelle }}&nbsp;↗</a>
          {% endif %}
          {% if eintrag.pruefung %}
          <span class="ml-1 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-xs"
                title="Die dedup-Prüfung hatte beim Eintragen Treffer.">{% from "icons.html" import icon_warnung %}{{ icon_warnung("h-3.5 w-3.5") }} Pr&uuml;fhinweis</span>
          {% endif %}
        </td>
        <td class="px-4 py-3">{{ eintrag.verlag or '—' }}</td>
        <td class="px-4 py-3 whitespace-nowrap">{{ eintrag.ausgabe or '—' }}</td>
        <td class="px-4 py-3 whitespace-nowrap">{{ namen.get(eintrag.rezensent_id, '—') }}</td>
        <td class="px-4 py-3 whitespace-nowrap">
          {% from "status.html" import status_badge %}{{ status_badge(eintrag.status, status_anzeige[eintrag.status]) }}
        </td>
        <td class="px-4 py-3 whitespace-nowrap text-slate-500">
          {{ eintrag.aktualisiert_am.strftime('%d.%m.%Y %H:%M') if eintrag.aktualisiert_am else '—' }}
        </td>
        <td class="px-4 py-3">
          {% if kann_bearbeiten(eintrag) %}
          <div class="flex flex-wrap items-center gap-1.5">
            {% if eintrag.status == 'offen' %}
            <form method="post" action="/planung/{{ eintrag.id }}/status">
              <input type="hidden" name="status" value="in_bearbeitung">
              <button type="submit" class="text-xs bg-sky-600 hover:bg-sky-700 text-white px-2.5 py-2 rounded-lg whitespace-nowrap">In Bearbeitung</button>
            </form>
            {% endif %}
            {% if eintrag.status != 'abgeschlossen' %}
            <form method="post" action="/planung/{{ eintrag.id }}/status">
              <input type="hidden" name="status" value="abgeschlossen">
              <button type="submit" class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2.5 py-2 rounded-lg whitespace-nowrap">Abgeschlossen</button>
            </form>
            {% endif %}
            <a href="/planung/{{ eintrag.id }}/bearbeiten"
               class="text-xs border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-2.5 py-2 rounded-lg whitespace-nowrap">Bearbeiten</a>
            <form method="post" action="/planung/{{ eintrag.id }}/loeschen"
        data-titel="{{ eintrag.titel }}"
        @submit.prevent="loeschTitel = $event.target.dataset.titel; loeschFormular = $event.target">
              <button type="submit" class="text-xs border border-red-200 text-red-600 hover:bg-red-50 px-2.5 py-2 rounded-lg whitespace-nowrap">L&ouml;schen</button>
            </form>
          </div>
          {% else %}
          <span class="text-xs text-slate-400">nur {{ namen.get(eintrag.rezensent_id, '') }}</span>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="8" class="px-4 py-8 text-center text-slate-400">
          Noch keine Eintr&auml;ge — schiebe einen Titel aus den Neuheiten hierher oder trage ihn oben h&auml;ndisch nach.
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% if hat_weitere %}
<div id="planung-lade-mehr"
     hx-get="/planung?seite_nr={{ naechste_seite }}&status={{ status_filter }}"
     hx-trigger="revealed delay:150ms" hx-swap="outerHTML">
  <div class="py-6 text-center text-sm text-slate-400">Lade weitere Eintr&auml;ge&nbsp;&hellip;</div>
</div>
{% endif %}
  <!-- Lösch-Bestätigungsdialog (Progressive Enhancement: ohne JavaScript
       sendet das Formular sofort, mit Alpine öffnet sich dieser Dialog). -->
  <div x-show="loeschFormular !== null" x-cloak
       class="fixed inset-0 z-50 flex items-center justify-center p-4"
       role="dialog" aria-modal="true" aria-labelledby="loesch-dialog-titel">
    <div class="absolute inset-0 bg-slate-900/50" @click="loeschFormular = null"></div>
    <div class="relative bg-white rounded-xl shadow-xl max-w-sm w-full p-5">
      <h2 id="loesch-dialog-titel" class="text-base font-semibold text-slate-800 mb-1">Eintrag löschen?</h2>
      <p class="text-sm text-slate-600 mb-4">
        &bdquo;<span x-text="loeschTitel"></span>&ldquo; wird endgültig gelöscht.
        Das lässt sich nicht rückgängig machen.
      </p>
      <div class="flex justify-end gap-2">
        <button type="button" @click="loeschFormular = null"
                class="px-4 py-2 rounded-lg border border-slate-300 text-sm hover:bg-slate-50">Abbrechen</button>
        <button type="button" @click="if (loeschFormular) { loeschFormular.submit(); }"
                class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium">Löschen</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}