{% 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 mb-4">
  Neuheitenliste aus der <a href="https://boardgamegeek.com" class="text-emerald-700 underline">BoardGameGeek</a>-Datenbank.
  Erweiterungen und Prototypen werden beim Sync automatisch gefiltert.
</p>

{% if meldung %}
<div id="meldung"
     class="mb-4 px-4 py-3 rounded-lg border text-sm
            {% if meldung.startswith('Sync fehlgeschlagen') %}bg-red-50 border-red-200 text-red-700{% else %}bg-emerald-50 border-emerald-200 text-emerald-800{% endif %}">
  {{ 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">{{ fehler }}</div>
{% endif %}

<div class="flex flex-wrap items-end gap-3 mb-4">
  {% if ist_redaktion %}
  <form method="post" action="/neuheiten/sync" class="flex items-end gap-2">
    <div>
      <label for="suchbegriff" class="block text-xs font-medium text-slate-500 mb-1">
        Sofort auf BoardGameGeek suchen &amp; importieren (optional)
      </label>
      <input type="text" id="suchbegriff" name="suchbegriff" placeholder="Spielname oder Suchbegriff …"
             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-72 focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
    <button type="submit"
            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
      &#8635; Jetzt synchronisieren
    </button>
  </form>
  {% endif %}
  <p class="text-xs text-slate-400 ml-auto">
    Hintergrund-Sync:
    {% if sync_aktiv %}<span class="text-emerald-700 font-medium">aktiv</span>{% else %}<span class="text-slate-500">aus</span>{% endif %}
    &middot; Suchbegriffe: {{ suchbegriffe }}
  </p>
</div>

<form method="get" action="/neuheiten"
      hx-get="/neuheiten" hx-target="#neuheiten-liste" hx-swap="outerHTML"
      hx-trigger="input changed delay:300ms from:find input[name='q'], change from:find select[name='status']"
      class="flex flex-wrap gap-3 mb-4">
  <input type="text" name="q" value="{{ q }}" placeholder="Suche in Titel, Verlag, Autor …"
         class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-80 focus:outline-none focus:ring-2 focus:ring-emerald-500">
  <select name="status" class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
    <option value="">Alle Status</option>
    {% for option in status_optionen %}
    <option value="{{ option }}" {% if option == status_filter %}selected{% endif %}>{{ option }}</option>
    {% endfor %}
  </select>
  <noscript>
    <button type="submit" class="bg-slate-200 hover:bg-slate-300 px-4 py-2 rounded-lg text-sm">Filtern</button>
  </noscript>
</form>

{% include "neuheiten/_liste.html" %}
{% endblock %}