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

<div class="flex items-center justify-between mb-4">
  <h1 class="page-title">Bieterfrage</h1>
  <a href="{% url 'ausschreibungen:bieterfragen:liste' ausschreibung.pk %}" class="btn-ghost text-xs">← Übersicht</a>
</div>

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 space-y-4">

    <div class="card space-y-3">
      <p class="text-sm font-medium text-slate-800 whitespace-pre-wrap">{{ bieterfrage.fragentext }}</p>
      {% if bieterfrage.begruendung %}
      <div class="border-t border-slate-100 pt-3">
        <p class="text-xs text-slate-500 mb-1">Begründung</p>
        <p class="text-sm text-slate-700 whitespace-pre-wrap">{{ bieterfrage.begruendung }}</p>
      </div>
      {% endif %}
    </div>

    {% if bieterfrage.antwort or bieterfrage.status == 'eingereicht' or bieterfrage.status == 'beantwortet' or bieterfrage.status == 'eingearbeitet' or show_antwort_form %}
    <div class="card space-y-3">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Antwort</p>
      {% if bieterfrage.antwort %}
      <p class="text-sm text-slate-800 whitespace-pre-wrap">{{ bieterfrage.antwort }}</p>
      {% if bieterfrage.auswirkung_angebot %}
      <div class="border-t border-slate-100 pt-3">
        <p class="text-xs text-slate-500 mb-1">Auswirkung auf Angebot</p>
        <p class="text-sm text-slate-700 whitespace-pre-wrap">{{ bieterfrage.auswirkung_angebot }}</p>
      </div>
      {% endif %}
      {% endif %}
      {% if bieterfrage.status == 'eingereicht' or bieterfrage.status == 'beantwortet' or show_antwort_form %}
      <form method="post" action="{% url 'ausschreibungen:bieterfragen:antwort' ausschreibung.pk bieterfrage.pk %}"
            class="space-y-3 border-t border-slate-100 pt-3">
        {% csrf_token %}
        <div>
          <label class="form-label">Antwort eintragen</label>
          <textarea name="antwort" rows="4" class="form-input w-full">{{ bieterfrage.antwort }}</textarea>
        </div>
        <div>
          <label class="form-label">Auswirkung auf Angebot</label>
          <textarea name="auswirkung_angebot" rows="2" class="form-input w-full">{{ bieterfrage.auswirkung_angebot }}</textarea>
        </div>
        <button type="submit" class="btn-primary text-xs">Antwort speichern</button>
      </form>
      {% endif %}
    </div>
    {% endif %}

  </div>

  <div class="space-y-4">

    <div class="card">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Status-Verlauf</p>

      <ol class="relative border-l border-slate-200 ml-2 space-y-4 mb-4">
        {% for val, label in bieterfrage.STATUS_CHOICES %}
        <li class="ml-4">
          <span class="absolute -left-1.5 mt-1 w-3 h-3 rounded-full border-2
            {% if val == bieterfrage.status %}border-blue-600 bg-blue-600{% else %}border-slate-300 bg-white{% endif %}">
          </span>
          <p class="text-sm {% if val == bieterfrage.status %}font-semibold text-blue-700{% else %}text-slate-400{% endif %}">
            {{ label }}
            {% if val == 'eingereicht' and bieterfrage.einreichungsdatum %}
            <span class="text-xs font-normal text-slate-500 ml-1">({{ bieterfrage.einreichungsdatum }})</span>
            {% endif %}
          </p>
        </li>
        {% endfor %}
      </ol>

      {% if bieterfrage.status == 'entwurf' %}
      <form method="post" action="{% url 'ausschreibungen:bieterfragen:status' ausschreibung.pk bieterfrage.pk %}">
        {% csrf_token %}
        <input type="hidden" name="status" value="abgestimmt">
        <button type="submit" class="btn-primary text-xs w-full">Abstimmen →</button>
      </form>
      {% elif bieterfrage.status == 'abgestimmt' %}
      <form method="post" action="{% url 'ausschreibungen:bieterfragen:status' ausschreibung.pk bieterfrage.pk %}">
        {% csrf_token %}
        <input type="hidden" name="status" value="eingereicht">
        <button type="submit" class="btn-primary text-xs w-full">Einreichen →</button>
      </form>
      {% elif bieterfrage.status == 'eingereicht' %}
      <form method="post" action="{% url 'ausschreibungen:bieterfragen:status' ausschreibung.pk bieterfrage.pk %}">
        {% csrf_token %}
        <input type="hidden" name="status" value="beantwortet">
        <button type="submit" class="btn-secondary text-xs w-full">Als beantwortet markieren</button>
      </form>
      {% elif bieterfrage.status == 'beantwortet' %}
      <form method="post" action="{% url 'ausschreibungen:bieterfragen:status' ausschreibung.pk bieterfrage.pk %}">
        {% csrf_token %}
        <input type="hidden" name="status" value="eingearbeitet">
        <button type="submit" class="btn-primary text-xs w-full">Einarbeiten ✓</button>
      </form>
      {% endif %}
    </div>

    <div class="card space-y-2">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Details</p>
      <p class="text-xs text-slate-600">Priorität: <span class="font-medium">{{ bieterfrage.get_prioritaet_display }}</span></p>
      {% if bieterfrage.verfasser %}
      <p class="text-xs text-slate-600">Verfasser: {{ bieterfrage.verfasser }}</p>
      {% endif %}
      {% if bieterfrage.anforderung %}
      <div class="border-t border-slate-100 pt-2 mt-2">
        <p class="text-xs text-slate-500 mb-1">Anforderung</p>
        <a href="{% url 'ausschreibungen:lose:anforderung_detail' ausschreibung.pk bieterfrage.anforderung.pk %}"
           class="text-xs text-blue-600 hover:underline">{{ bieterfrage.anforderung.titel|truncatechars:50 }}</a>
        <div class="mt-2">
          <a href="{% url 'ausschreibungen:lose:anforderung_detail' ausschreibung.pk bieterfrage.anforderung.pk %}"
             class="text-xs btn-secondary">Anforderungsstatus aktualisieren →</a>
        </div>
      </div>
      {% endif %}
    </div>

  </div>
</div>

{% endblock %}