{% extends "base.html" %}
{% load vergabe_tags %}
{% block title %}{{ los }} — {{ ausschreibung.titel }}{% endblock %}
{% block content %}

<div class="flex items-start justify-between mb-4">
  <div>
    <h1 class="page-title">{{ los.lostitel }}</h1>
    <p class="text-sm text-slate-500 mt-0.5">Los {{ los.losnummer }} · {{ ausschreibung.titel }}</p>
  </div>
  <div class="flex gap-2 shrink-0">
    <a href="{% url 'ausschreibungen:lose:bearbeiten' ausschreibung.pk los.pk %}" class="btn-ghost text-xs">Bearbeiten</a>
    <a href="{% url 'ausschreibungen:lose:loeschen' ausschreibung.pk los.pk %}" class="btn-ghost text-xs text-slate-400">Löschen</a>
  </div>
</div>

<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">Stammdaten</h2>
    <dl class="space-y-1">
      {% render_field los "losnummer" "Losnummer" %}
      {% render_field los "lostitel" "Lostitel" %}
      {% render_field los "zustaendiger" "Zuständiger" %}
    </dl>
  </div>

  <div class="card">
    <h2 class="text-sm font-semibold text-slate-700 mb-3">Teilnahme</h2>
    <p class="text-sm">
      {% if los.teilnahme is None %}
        <span class="text-slate-500">Noch nicht entschieden</span>
      {% elif los.teilnahme %}
        <span class="text-green-700 font-medium">Teilnahme</span>
      {% else %}
        <span class="text-red-700 font-medium">Keine Teilnahme</span>
      {% endif %}
    </p>
  </div>
</div>

{% if los.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">{{ los.beschreibung }}</p>
</div>
{% endif %}

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

<!-- Anforderungen -->
<div class="card mt-6">
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-sm font-semibold text-slate-700">Anforderungen ({{ anforderungen.count }})</h2>
    <a href="{% url 'ausschreibungen:lose:anforderung_neu' ausschreibung.pk %}?los={{ los.pk }}"
       class="btn-ghost text-xs">+ Anforderung</a>
  </div>
  {% if anforderungen %}
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-slate-200 text-left text-xs text-slate-500">
        <th class="pb-2 pr-4">Titel</th>
        <th class="pb-2 pr-4">Verbindlichkeit</th>
        <th class="pb-2">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for a in anforderungen %}
      <tr class="hover:bg-slate-50 {% if a.ausschlusskriterium and a.erfuellungsstatus == 'nicht_erfuellbar' %}bg-red-50{% endif %}">
        <td class="py-2 pr-4">
          <a href="{% url 'ausschreibungen:lose:anforderung_detail' ausschreibung.pk a.pk %}"
             class="text-brand-600 hover:underline">{{ a.titel }}</a>
        </td>
        <td class="py-2 pr-4">{% status_badge a.verbindlichkeit a.get_verbindlichkeit_display %}</td>
        <td class="py-2">{% status_badge a.erfuellungsstatus a.get_erfuellungsstatus_display %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-sm text-slate-500">Noch keine Anforderungen für dieses Los.</p>
  {% endif %}
</div>

{% endblock %}