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

<div class="flex items-center justify-between mb-4">
  <h1 class="page-title">Dokumente</h1>
  <a href="{% url 'ausschreibungen:dokumente:upload' ausschreibung.pk %}" class="btn-primary text-xs">+ Hochladen</a>
</div>

<form class="card mb-4 flex flex-wrap gap-3 items-end">
  <div>
    <label class="form-label">Status</label>
    <select name="status" class="form-input text-xs" onchange="this.form.submit()">
      <option value="">Alle</option>
      {% for val, label in status_choices %}
      <option value="{{ val }}"{% if current_status == val %} selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
  </div>
  <div>
    <label class="form-label">Kategorie</label>
    <select name="kategorie" class="form-input text-xs" onchange="this.form.submit()">
      <option value="">Alle</option>
      {% for val, label in kategorie_choices %}
      <option value="{{ val }}"{% if current_kategorie == val %} selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
  </div>
</form>

{% if grouped_dokumente %}
  {% for kategorie_label, dokumente in grouped_dokumente.items %}
  <div class="mb-4" x-data="{ open: true }">
    <button @click="open = !open"
            class="w-full flex items-center justify-between card py-2 px-4 text-left text-sm font-semibold text-slate-700 hover:bg-slate-50">
      <span>{{ kategorie_label }} <span class="text-xs font-normal text-slate-400">({{ dokumente|length }})</span></span>
      <span x-text="open ? '▲' : '▼'" class="text-xs text-slate-400"></span>
    </button>
    <div x-show="open" class="card mt-0 rounded-t-none border-t-0">
      <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">Datei</th>
            <th class="pb-2 pr-4">Version</th>
            <th class="pb-2 pr-4">Status</th>
            <th class="pb-2 pr-4">Verantwortlicher</th>
            <th class="pb-2 pr-4">Prüfer</th>
            <th class="pb-2">Datum</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for dok in dokumente %}
          <tr class="hover:bg-slate-50{% if dok.finale_abgabeversion %} bg-green-50{% endif %}">
            <td class="py-2 pr-4">
              <a href="{% url 'ausschreibungen:dokumente:detail' ausschreibung.pk dok.pk %}"
                 class="font-medium text-slate-800 hover:text-blue-600">
                {{ dok.dateiname|default:dok.pk }}
              </a>
              {% if dok.finale_abgabeversion %}
              <span class="ml-1 inline-block text-xs bg-green-100 text-green-700 px-1.5 py-0.5 rounded">Final</span>
              {% endif %}
              {% if dok.quelle %}
              <p class="text-xs text-slate-400">{{ dok.quelle }}</p>
              {% endif %}
            </td>
            <td class="py-2 pr-4 text-xs text-slate-600">{{ dok.version }}</td>
            <td class="py-2 pr-4" id="status-widget-{{ dok.pk }}">
              {% include "dokumente/partials/status_widget.html" with dokument=dok %}
            </td>
            <td class="py-2 pr-4 text-xs text-slate-600">{{ dok.verantwortlicher|default:"—" }}</td>
            <td class="py-2 pr-4 text-xs text-slate-600">{{ dok.pruefer|default:"—" }}</td>
            <td class="py-2 text-xs text-slate-500">{{ dok.upload_datum|date:"d.m.Y" }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endfor %}
{% else %}
<div class="card text-center py-10 text-slate-500 text-sm">Noch keine Dokumente hochgeladen.</div>
{% endif %}

{% endblock %}