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

<div class="flex items-center justify-between mb-4">
  <h1 class="page-title">Bieterfragen</h1>
  <a href="{% url 'ausschreibungen:bieterfragen:neu' ausschreibung.pk %}" class="btn-primary text-xs">+ Bieterfrage anlegen</a>
</div>

{% if ausschreibung.bieterfragen_frist %}
{% with tage=ausschreibung.bieterfragen_frist|timeuntil %}
<div class="{% if tage == '0 minutes' %}bg-red-50 border-red-300 text-red-700{% else %}bg-yellow-50 border-yellow-300 text-yellow-700{% endif %} border rounded-lg p-3 mb-4 text-sm">
  Bieterfragen bis: <strong>{{ ausschreibung.bieterfragen_frist|date:"d.m.Y" }}</strong>
  {% if tage != '0 minutes' %}— noch {{ tage }}{% else %}— Frist abgelaufen{% endif %}
</div>
{% endwith %}
{% endif %}

<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"
            hx-get="" hx-target="#bieterfragen-list" hx-push-url="true" hx-trigger="change">
      <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">Priorität</label>
    <select name="prioritaet" class="form-input text-xs"
            hx-get="" hx-target="#bieterfragen-list" hx-push-url="true" hx-trigger="change">
      <option value="">Alle</option>
      {% for val, label in prioritaet_choices %}
      <option value="{{ val }}">{{ label }}</option>
      {% endfor %}
    </select>
  </div>
</form>

<div id="bieterfragen-list" class="card">
  {% if bieterfragen %}
  <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">Frage</th>
        <th class="pb-2 pr-4">Status</th>
        <th class="pb-2 pr-4">Priorität</th>
        <th class="pb-2 pr-4">Eingereicht</th>
        <th class="pb-2">Verfasser</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for bf in bieterfragen %}
      <tr class="hover:bg-slate-50">
        <td class="py-2 pr-4">
          <a href="{% url 'ausschreibungen:bieterfragen:detail' ausschreibung.pk bf.pk %}"
             class="font-medium text-slate-800 hover:text-blue-600">
            {{ bf.fragentext|truncatechars:80 }}
          </a>
          {% if bf.anforderung %}
          <p class="text-xs text-slate-400 mt-0.5">Anforderung: {{ bf.anforderung.titel|truncatechars:40 }}</p>
          {% endif %}
        </td>
        <td class="py-2 pr-4">{% status_badge bf.status bf.get_status_display %}</td>
        <td class="py-2 pr-4 text-xs">{{ bf.get_prioritaet_display }}</td>
        <td class="py-2 pr-4 text-xs text-slate-600">{{ bf.einreichungsdatum|default:"—" }}</td>
        <td class="py-2 text-xs text-slate-600">{{ bf.verfasser|default:"—" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-sm text-slate-500 text-center py-8">Noch keine Bieterfragen angelegt.</p>
  {% endif %}
</div>

{% endblock %}