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

<!-- Title row -->
<div class="flex items-start justify-between mb-4 gap-4">
  <div>
    <h1 class="page-title">{{ ausschreibung.titel }}</h1>
    <p class="text-sm text-slate-500 mt-0.5">{{ ausschreibung.ausschreiber }}</p>
  </div>
  <div class="flex items-center gap-2 shrink-0">
    {% with s=aufgaben_score %}{% if s.total %}<span class="text-xs text-slate-500">Aufgaben: {{ s.abgeschlossen }}/{{ s.total }} ({{ s.score_pct }}&nbsp;%)</span>{% endif %}{% endwith %}
    {% include "ausschreibungen/partials/status_widget.html" %}
    <a href="{% url 'ausschreibungen:bearbeiten' ausschreibung.pk %}" class="btn-ghost text-xs">Bearbeiten</a>
    <a href="{% url 'ausschreibungen:archivieren' ausschreibung.pk %}" class="btn-ghost text-xs text-slate-400">Archivieren</a>
  </div>
</div>

<!-- Deadline warnings -->
{% if warnungen %}
<div class="space-y-2 mb-5">
  {% for w in warnungen %}
  <div class="rounded px-4 py-2 text-sm flex items-center gap-2
              {% if w.farbe == 'red' %}bg-red-50 border border-red-200 text-red-700
              {% else %}bg-amber-50 border border-amber-200 text-amber-700{% endif %}">
    <span class="font-medium">
      {% if w.typ == 'bieterfragen' %}Bieterfragen-Frist{% else %}Abgabe-Frist{% endif %}:
    </span>
    {% if w.tage < 0 %}
      überfällig
    {% elif w.tage == 0 %}
      heute!
    {% else %}
      noch {{ w.tage }} Tag{% if w.tage != 1 %}e{% endif %}
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endif %}

<!-- Phase navigation tabs -->
<div class="flex gap-1 border-b border-slate-200 mb-6 overflow-x-auto">
  {% for phase in phases %}
  <a href="{{ phase.url }}"
     class="px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 -mb-px
            {% if phase.aktiv %}border-brand-600 text-brand-700
            {% elif phase.erledigt %}border-transparent text-slate-500 hover:text-slate-700
            {% else %}border-transparent text-slate-400 hover:text-slate-600{% endif %}">
    <span class="mr-1 {% if phase.erledigt %}phase-done{% elif phase.aktiv %}phase-active{% else %}phase-todo{% endif %}">{{ phase.nummer }}</span>
    {{ phase.name }}
  </a>
  {% endfor %}
</div>

<!-- Stammdaten -->
<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 ausschreibung "ausschreiber" "Ausschreiber" %}
      {% render_field ausschreibung "vergabeart" "Vergabeart" %}
      {% render_field ausschreibung "rechtsgrundlage" "Rechtsgrundlage" %}
      {% render_field ausschreibung "rechtsgrundlage_details" "Rechtsgrundlage Details" %}
      {% render_field ausschreibung "vergabenummer" "Vergabenummer" %}
      {% render_field ausschreibung "vergabeplattform" "Plattform" %}
      {% render_field ausschreibung "branche" "Branche" %}
      {% render_field ausschreibung "schlagwoerter" "Schlagwörter" %}
      {% render_field ausschreibung "geschaetztes_volumen" "Geschätztes Volumen (€)" %}
    </dl>
  </div>

  <div class="card">
    <h2 class="text-sm font-semibold text-slate-700 mb-3">Fristen</h2>
    <dl class="space-y-1">
      {% render_field ausschreibung "veroeffentlichungsdatum" "Veröffentlicht" %}
      {% render_field ausschreibung "bieterfragen_bis" "Bieterfragen bis" %}
      {% render_field ausschreibung "abgabe_bis" "Abgabe bis" %}
      {% if ausschreibung.bindefrist_tage %}
      <div class="flex justify-between text-sm py-0.5">
        <dt class="text-slate-500">Bindefrist</dt>
        <dd class="text-slate-800">
          {{ ausschreibung.bindefrist_tage }} Tage
          {% if ausschreibung.bindefrist_berechnet %}
          <span class="text-slate-400">(bis {{ ausschreibung.bindefrist_berechnet|date:"d.m.Y" }})</span>
          {% endif %}
        </dd>
      </div>
      {% else %}
      {% render_field ausschreibung "bindefrist" "Bindefrist" %}
      {% endif %}
    </dl>
  </div>
</div>

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

<!-- Lose -->
<div class="card mt-6">
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-sm font-semibold text-slate-700">Lose</h2>
    <button class="btn-ghost text-xs"
            hx-get="{% url 'ausschreibungen:lose:neu' ausschreibung.pk %}"
            hx-target="#lose-form-container"
            hx-swap="innerHTML">
      + Los hinzufügen
    </button>
  </div>
  <div id="lose-form-container"></div>
  {% if lose %}
  <table class="w-full text-sm mt-1">
    <thead>
      <tr class="border-b border-slate-200 text-left text-xs text-slate-500">
        <th class="pb-2 pr-4">Nr.</th>
        <th class="pb-2 pr-4">Titel</th>
        <th class="pb-2 pr-4">Aufgaben</th>
        <th class="pb-2 pr-4">Teilnahme</th>
        <th class="pb-2"></th>
      </tr>
    </thead>
    <tbody id="lose-tbody" class="divide-y divide-slate-100">
      {% for los in lose %}
      {% include "lose/partials/los_row.html" %}
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div id="lose-tbody"></div>
  <p class="text-sm text-slate-400 mt-1">Noch keine Lose angelegt.</p>
  {% endif %}
</div>

<!-- Aufgaben -->
<div class="card mt-6">
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-sm font-semibold text-slate-700">Aufgaben</h2>
    <div class="flex items-center gap-2">
      <a href="{% url 'ausschreibungen:aufgaben:liste' ausschreibung.pk %}" class="btn-ghost text-xs">Alle anzeigen</a>
      <button class="btn-ghost text-xs"
              hx-get="{% url 'ausschreibungen:aufgaben:neu' ausschreibung.pk %}"
              hx-target="#aufgaben-form-container"
              hx-swap="innerHTML">
        + Aufgabe anlegen
      </button>
    </div>
  </div>
  <div id="aufgaben-form-container"></div>
  {% if aufgaben %}
  <table class="w-full text-sm mt-1">
    <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">Typ</th>
        <th class="pb-2 pr-4">Frist</th>
        <th class="pb-2 pr-4">Verantwortlicher</th>
        <th class="pb-2 pr-4">Status</th>
        <th class="pb-2"></th>
      </tr>
    </thead>
    <tbody id="aufgaben-tbody" class="divide-y divide-slate-100">
      {% for aufgabe in aufgaben %}
      {% include "aufgaben/partials/aufgabe_row.html" %}
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div id="aufgaben-tbody"></div>
  <p class="text-sm text-slate-400 mt-1">Noch keine Aufgaben angelegt.</p>
  {% endif %}
</div>

<div class="flex gap-3 mt-6">
  <a href="{% url 'ausschreibungen:entscheidung' ausschreibung.pk %}" class="btn-ghost text-xs">
    Teilnahmeentscheidung
  </a>
</div>

{% endblock %}