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

<h1 class="page-title mb-6">{{ titel }}</h1>

<form method="post" class="max-w-2xl space-y-6">
  {% csrf_token %}

  <div class="card space-y-4">
    <h2 class="text-sm font-semibold text-slate-700">Allgemein</h2>

    <div>
      <label class="form-label">Titel <span class="text-red-500">*</span></label>
      {{ form.titel }}
      {% if form.titel.errors %}<p class="text-xs text-red-600 mt-1">{{ form.titel.errors.0 }}</p>{% endif %}
    </div>

    <div>
      <label class="form-label">Beschreibung</label>
      {{ form.beschreibung }}
    </div>

    <div class="grid grid-cols-2 gap-4">
      <div>
        <label class="form-label">Kategorie</label>
        {{ form.kategorie }}
      </div>
      <div>
        <label class="form-label">Los</label>
        {{ form.los }}
      </div>
    </div>

    <div>
      <label class="form-label">Quelle im Dokument</label>
      {{ form.quelle_im_dokument }}
    </div>
  </div>

  <div class="card space-y-4">
    <h2 class="text-sm font-semibold text-slate-700">Verbindlichkeit & Bewertung</h2>

    <div>
      <label class="form-label">Verbindlichkeit <span class="text-red-500">*</span></label>
      <div class="flex gap-4 mt-1">
        {% for widget in form.verbindlichkeit %}
        <label class="flex items-center gap-1.5 text-sm cursor-pointer">
          {{ widget.tag }}
          <span>{{ widget.choice_label }}</span>
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="flex gap-6">
      <label class="flex items-center gap-2 text-sm cursor-pointer">
        {{ form.ausschlusskriterium }}
        <span>Ausschlusskriterium</span>
      </label>
      <label class="flex items-center gap-2 text-sm cursor-pointer">
        {{ form.bewertungskriterium }}
        <span>Bewertungskriterium</span>
      </label>
      <label class="flex items-center gap-2 text-sm cursor-pointer">
        {{ form.nachweis_erforderlich }}
        <span>Nachweis erforderlich</span>
      </label>
    </div>

    <div class="grid grid-cols-2 gap-4">
      <div>
        <label class="form-label">Erfüllungsstatus</label>
        {{ form.erfuellungsstatus }}
      </div>
      <div>
        <label class="form-label">Zuständiger</label>
        {{ form.zustaendiger }}
      </div>
    </div>
  </div>

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

{% endblock %}