{% extends "base.html" %}
{% block title %}Abgabe-Checkliste — {{ ausschreibung.titel }}{% endblock %}
{% block content %}

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

{% if ausschreibung.abgabe_bis %}
<div class="card mb-4 bg-amber-50 border border-amber-200">
  <p class="text-sm font-medium text-amber-800">Abgabe bis: <strong>{{ ausschreibung.abgabe_bis }}</strong></p>
</div>
{% endif %}

<div class="card mb-4">
  <div class="flex items-center justify-between mb-3">
    <p class="text-sm font-medium text-slate-700">Fortschritt</p>
    <p class="text-sm font-bold text-slate-700">{{ erfuellt }} / {{ gesamt }}</p>
  </div>
  <div class="w-full bg-slate-200 rounded-full h-2">
    <div class="bg-blue-600 h-2 rounded-full" style="width: {% widthratio erfuellt gesamt 100 %}%"></div>
  </div>
</div>

<div class="card mb-4">
  <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Freigaben & Entscheidungen</p>
  <ul class="space-y-2">
    {% for label, ok in punkte %}
    <li class="flex items-center gap-3">
      {% if ok %}
      <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 text-xs font-bold">✓</span>
      <span class="text-sm text-slate-700">{{ label }}</span>
      {% else %}
      <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-100 text-red-600 text-xs font-bold">✗</span>
      <span class="text-sm text-slate-400">{{ label }}</span>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</div>

<div class="card mb-4">
  <div class="flex items-center justify-between mb-3">
    <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Dokumente</p>
    <p class="text-xs text-slate-500">{{ vollstaendigkeit.dokumente_freigegeben }} / {{ vollstaendigkeit.dokumente_gesamt }} freigegeben</p>
  </div>
  {% if dokumente %}
  <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-3">Bezeichnung</th>
        <th class="pb-2 pr-3">Kategorie</th>
        <th class="pb-2">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for dok in dokumente %}
      <tr>
        <td class="py-2 pr-3 text-xs">{{ dok.bezeichnung|default:dok.datei.name }}</td>
        <td class="py-2 pr-3 text-xs text-slate-500">{{ dok.get_kategorie_display }}</td>
        <td class="py-2 text-xs">
          {% if dok.status == 'final_abgegeben' or dok.status == 'freigegeben' %}
          <span class="text-green-700 font-medium">{{ dok.get_status_display }}</span>
          {% else %}
          <span class="text-slate-400">{{ dok.get_status_display }}</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-sm text-slate-400">Noch keine Dokumente hochgeladen.</p>
  {% endif %}
</div>

{% endblock %}