{% extends "base.html" %}
{% block titel %}{{ titel_headline }} — Spiele-Redaktion{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold mb-2">{{ titel_headline }}</h1>
<p class="text-slate-600 mb-4">
  Die automatische Dedup-Pr&uuml;fung hat Treffer ergeben. Bitte pr&uuml;fen, bevor
  der Eintrag angelegt wird.
</p>

<div class="flex flex-col sm:flex-row gap-4 items-start">
<div class="shrink-0 mx-auto sm:mx-0">
  {% set cover_bild = bild_url %}
  {% set cover_titel = spiel_titel %}
  {% set cover_gross = true %}
  {% include "planung/_cover.html" %}
</div>
<div class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-0 sm:mb-6 text-sm w-full">
  <p class="font-medium text-amber-800 mb-2">&#9888; {{ konflikte|length }} Treffer f&uuml;r „{{ spiel_titel }}“</p>
  <ul class="list-disc list-inside space-y-1 text-slate-700">
    {% for konflikt in konflikte %}
    <li>
      <span class="inline-block px-2 py-0.5 rounded-full text-xs mr-1
                   {% if konflikt.art == 'verlag' %}bg-orange-200 text-orange-900
                   {% elif konflikt.art == 'titel' %}bg-sky-200 text-sky-900
                   {% elif konflikt.art == 'besprochen' %}bg-violet-200 text-violet-900
                   {% else %}bg-amber-200 text-amber-900{% endif %}">
        {{ konflikt_anzeige.get(konflikt.art, konflikt.art) }}
      </span>
      {{ konflikt.beschreibung }}
    </li>
    {% endfor %}
  </ul>
  {% if titel_empfehlung and titel_empfehlung != spiel_titel %}
  <p class="mt-2 text-slate-600">Empfohlener Titel: <span class="font-medium">{{ titel_empfehlung }}</span></p>
  {% endif %}
</div>
</div>

<form method="post" action="{{ aktion }}" class="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
  {% for name, wert in versteckt.items() %}
  <input type="hidden" name="{{ name }}" value="{{ wert }}">
  {% endfor %}

  <h2 class="font-semibold mb-3">Welcher Verlag soll gef&uuml;hrt werden?</h2>
  <div class="space-y-2 mb-4 text-sm">
    {% for option in verlags_optionen %}
    <label class="flex items-center gap-2 cursor-pointer">
      <input type="radio" name="verlag_wahl" value="{{ option }}" required
             class="accent-emerald-600">
      <span>{{ option }}</span>
    </label>
    {% endfor %}
  </div>

  <div class="flex items-center gap-3">
    <button type="submit"
            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-4 py-2 rounded-lg text-sm">
      Mit gew&auml;hltem Verlag &uuml;bernehmen
    </button>
    <a href="{{ abbrechen_url }}" class="text-sm text-slate-500 hover:text-slate-800 underline">Abbrechen</a>
  </div>
</form>
{% endblock %}