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

<div class="flex items-start justify-between mb-4">
  <div>
    <h1 class="page-title">{{ anforderung.titel }}</h1>
    <p class="text-sm text-slate-500 mt-0.5">
      {% if anforderung.los %}Los {{ anforderung.los.losnummer }}{% else %}Allgemein{% endif %}
      · {{ ausschreibung.titel }}
    </p>
  </div>
  <div class="flex gap-2 shrink-0">
    {% include "lose/partials/erfuellungsstatus_widget.html" %}
    <a href="{% url 'ausschreibungen:lose:anforderung_bearbeiten' ausschreibung.pk anforderung.pk %}"
       class="btn-ghost text-xs">Bearbeiten</a>
  </div>
</div>

{% if anforderung.ausschlusskriterium and anforderung.erfuellungsstatus == 'nicht_erfuellbar' %}
<div class="bg-red-50 border border-red-300 rounded-lg px-4 py-3 mb-5">
  <p class="text-sm font-semibold text-red-700">⚠ Nicht erfüllbares Ausschlusskriterium</p>
  <p class="text-xs text-red-600 mt-1">Diese Anforderung gefährdet die Teilnahmemöglichkeit.</p>
</div>
{% endif %}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
  <div class="card">
    <h2 class="text-sm font-semibold text-slate-700 mb-3">Details</h2>
    <dl class="space-y-1">
      {% render_field anforderung "verbindlichkeit" "Verbindlichkeit" %}
      {% render_field anforderung "kategorie" "Kategorie" %}
      {% render_field anforderung "quelle_im_dokument" "Quelle im Dokument" %}
      {% render_field anforderung "zustaendiger" "Zuständiger" %}
    </dl>
    <div class="mt-3 flex gap-4 text-xs text-slate-600">
      {% if anforderung.ausschlusskriterium %}
      <span class="text-red-600 font-medium">Ausschlusskriterium</span>
      {% endif %}
      {% if anforderung.bewertungskriterium %}
      <span class="text-amber-700 font-medium">Bewertungskriterium</span>
      {% endif %}
      {% if anforderung.nachweis_erforderlich %}
      <span class="text-blue-700 font-medium">Nachweis erforderlich</span>
      {% endif %}
    </div>
  </div>

  <!-- Nachweise -->
  <div class="card">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-sm font-semibold text-slate-700">Nachweise</h2>
      <button hx-get="{% url 'ausschreibungen:lose:nachweis_suche' ausschreibung.pk anforderung.pk %}"
              hx-target="#nachweis-modal"
              class="btn-ghost text-xs">Nachweis zuordnen</button>
    </div>
    <div id="nachweise-liste">
      {% include "lose/partials/nachweise_liste.html" %}
    </div>
    <div id="nachweis-modal"></div>
  </div>
</div>

{% if anforderung.beschreibung %}
<div class="card mt-6">
  <h2 class="text-sm font-semibold text-slate-700 mb-2">Beschreibung</h2>
  <p class="text-sm text-slate-600 whitespace-pre-line">{{ anforderung.beschreibung }}</p>
</div>
{% endif %}

<!-- Verbundene Aufgaben -->
<div class="card mt-6">
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-sm font-semibold text-slate-700">Verbundene Aufgaben ({{ aufgaben.count }})</h2>
    <a href="{% url 'ausschreibungen:lose:anforderung_aufgabe' ausschreibung.pk anforderung.pk %}"
       class="btn-ghost text-xs">+ Aufgabe erstellen</a>
  </div>
  {% if aufgaben %}
  <ul class="divide-y divide-slate-100 text-sm">
    {% for a in aufgaben %}
    <li class="py-2 flex items-center justify-between">
      <span>{{ a.titel }}</span>
      {% status_badge a.status a.get_status_display %}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="text-sm text-slate-500">Keine Aufgaben verknüpft.</p>
  {% endif %}
</div>

{% endblock %}