{% extends "base.html" %}
{% load vergabe_tags %}
{% block title %}Übersicht{% endblock %}
{% block content %}
<h1 class="page-title mb-6">Übersicht</h1>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

  <!-- Kritische Fristen -->
  <div class="card">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-sm font-semibold text-slate-700">Kritische Fristen (14 Tage)</h2>
      <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-100 text-red-700 text-xs font-bold">
        {{ kritische_fristen|length }}
      </span>
    </div>
    {% if kritische_fristen %}
    <ul class="space-y-1">
      {% for a in kritische_fristen %}
      <li class="flex items-center justify-between py-1 text-sm">
        <a href="/ausschreibungen/{{ a.pk }}/" class="text-brand-700 hover:underline truncate max-w-xs">{{ a.titel }}</a>
        <span class="ml-2 shrink-0 {% if a.abgabe_bis.date <= today %}text-red-600 font-medium{% else %}text-amber-600{% endif %}">
          {{ a.abgabe_bis|date:"d.m.Y H:i" }}
        </span>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-slate-400 text-sm">Keine kritischen Fristen.</p>
    {% endif %}
  </div>

  <!-- Ohne Teilnahmeentscheidung -->
  <div class="card">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-sm font-semibold text-slate-700">Ohne Teilnahmeentscheidung</h2>
      <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-amber-100 text-amber-700 text-xs font-bold">
        {{ ohne_entscheidung|length }}
      </span>
    </div>
    {% if ohne_entscheidung %}
    <ul class="space-y-1">
      {% for a in ohne_entscheidung %}
      <li class="py-1 text-sm">
        <a href="/ausschreibungen/{{ a.pk }}/entscheidung/" class="text-brand-700 hover:underline">{{ a.titel }}</a>
        <span class="text-slate-400 text-xs ml-1">seit {{ a.erstellt_am|date:"d.m.Y" }}</span>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-slate-400 text-sm">Alle Ausschreibungen haben eine Entscheidung.</p>
    {% endif %}
  </div>

  <!-- Überfällige Aufgaben -->
  <div class="card">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-sm font-semibold text-slate-700">Überfällige Aufgaben</h2>
      <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-100 text-red-700 text-xs font-bold">
        {{ ueberfaellige_aufgaben|length }}
      </span>
    </div>
    {% if ueberfaellige_aufgaben %}
    <ul class="space-y-1">
      {% for aufgabe in ueberfaellige_aufgaben %}
      <li class="flex items-center justify-between py-1 text-sm">
        <a href="/ausschreibungen/{{ aufgabe.ausschreibung_id }}/aufgaben/" class="text-brand-700 hover:underline truncate max-w-xs">
          {{ aufgabe.titel }}
        </a>
        <span class="text-red-600 text-xs ml-2 shrink-0">{{ aufgabe.frist|date:"d.m.Y" }}</span>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-slate-400 text-sm">Keine überfälligen Aufgaben.</p>
    {% endif %}
  </div>

  <!-- Laufende Ausschreibungen -->
  <div class="card">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-sm font-semibold text-slate-700">Laufende Ausschreibungen</h2>
      <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-brand-100 text-brand-700 text-xs font-bold">
        {{ laufende_ausschreibungen|length }}
      </span>
    </div>
    {% if laufende_ausschreibungen %}
    <ul class="space-y-1">
      {% for a in laufende_ausschreibungen %}
      <li class="flex items-center justify-between py-1 text-sm">
        <a href="/ausschreibungen/{{ a.pk }}/" class="text-brand-700 hover:underline truncate max-w-xs">{{ a.titel }}</a>
        {% status_badge a.get_status_display a.status %}
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-slate-400 text-sm">Keine laufenden Ausschreibungen.</p>
    {% endif %}
  </div>

</div>
{% endblock %}