{% 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">
    {% 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 "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" %}
      {% render_field ausschreibung "bindefrist" "Bindefrist" %}
    </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 %}

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

{% endblock %}