{% extends "base.html" %}
{% block title %}Nachbetrachtung — {{ ausschreibung.titel }}{% endblock %}
{% block content %}

<div class="flex items-center justify-between mb-4">
  <h1 class="page-title">Nachbetrachtung</h1>
  <a href="{% url 'ausschreibungen:detail' ausschreibung.pk %}" class="btn-ghost text-xs">← Ausschreibung</a>
</div>

<form method="post" class="space-y-4">
  {% csrf_token %}

  <div class="card">
    <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Ergebnis</p>
    <div class="flex flex-wrap gap-4">
      {% for value, label in form.ergebnis.field.choices %}
      <label class="flex items-center gap-2 cursor-pointer">
        <input type="radio" name="ergebnis" value="{{ value }}"
               {% if form.ergebnis.value == value %}checked{% endif %}
               class="text-blue-600">
        <span class="text-sm">{{ label }}</span>
      </label>
      {% endfor %}
    </div>
  </div>

  <div class="grid grid-cols-2 gap-4">
    <div class="card">
      <label class="form-label">{{ form.zuschlagsdatum.label }}</label>
      {{ form.zuschlagsdatum }}
    </div>
    <div class="card">
      <label class="form-label">{{ form.projektverantwortlicher.label }}</label>
      {{ form.projektverantwortlicher }}
    </div>
  </div>

  {% if kickoff_aufgabe %}
  <div class="card bg-green-50 border border-green-200">
    <p class="text-xs font-medium text-green-700 uppercase tracking-wide mb-1">Übergabe</p>
    <p class="text-sm text-green-800">
      Kickoff-Aufgabe:
      <a href="{% url 'ausschreibungen:aufgaben:detail' ausschreibung.pk kickoff_aufgabe.pk %}"
         class="underline">{{ kickoff_aufgabe.titel }}</a>
      — {{ kickoff_aufgabe.get_status_display }}
    </p>
  </div>
  {% endif %}

  <div class="card">
    <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Abgegebene Unterlagen</p>
    <div class="space-y-3">
      <div>
        <label class="form-label">{{ form.abgegebene_unterlagen.label }}</label>
        {{ form.abgegebene_unterlagen }}
      </div>
      <div>
        <label class="form-label">{{ form.abgegebene_preise.label }}</label>
        {{ form.abgegebene_preise }}
      </div>
    </div>
  </div>

  <div class="card" x-data="{ gruende: {{ verlustgruende_json }} }">
    <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Verlustanalyse</p>

    <div>
      <template x-for="(g, i) in gruende" :key="i">
        <div class="flex gap-2 mb-2 items-center">
          <input x-model="g.grund" class="form-input flex-1" placeholder="Verlustgrund">
          <select x-model="g.kategorie" class="form-input w-36">
            <option value="preis">Preis</option>
            <option value="referenz">Referenz</option>
            <option value="anforderung">Anforderung</option>
            <option value="subunternehmer">Subunternehmer</option>
            <option value="sonstiges">Sonstiges</option>
          </select>
          <input type="number" x-model.number="g.verlaesslichkeit" min="1" max="5"
                 class="form-input w-20" placeholder="1-5" title="Verlässlichkeit 1-5">
          <button type="button" @click="gruende.splice(i, 1)" class="btn-ghost text-red-500 text-xs">✕</button>
        </div>
      </template>
      <button type="button"
              @click="gruende.push({grund:'', kategorie:'sonstiges', verlaesslichkeit:3})"
              class="btn-secondary text-xs mt-1">+ Verlustgrund</button>
    </div>
    <input type="hidden" name="verlustgruende" :value="JSON.stringify(gruende)">

    <div class="mt-4">
      <label class="form-label">{{ form.ausschlaggebende_zuschlagsmerkmale.label }}</label>
      {{ form.ausschlaggebende_zuschlagsmerkmale }}
    </div>
  </div>

  <div class="card">
    <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Lessons Learned</p>
    <div class="space-y-3">
      <div>
        <label class="form-label">{{ form.lessons_learned.label }}</label>
        {{ form.lessons_learned }}
      </div>
      <div>
        <label class="form-label">{{ form.empfehlungen.label }}</label>
        {{ form.empfehlungen }}
      </div>
      <div class="flex items-center gap-2">
        {{ form.wiederverwendbare_erkenntnisse_markiert }}
        <label class="text-sm text-slate-700">Wiederverwendbare Erkenntnisse markieren</label>
      </div>
    </div>
  </div>

  <div class="flex gap-3">
    <button type="submit" class="btn-primary">Speichern</button>
    <a href="{% url 'ausschreibungen:detail' ausschreibung.pk %}" class="btn-ghost">Abbrechen</a>
  </div>
</form>

{% endblock %}