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

<div class="flex items-center justify-between mb-4">
  <h1 class="page-title">{{ preispunkt.konkrete_leistung }}</h1>
  <a href="{% url 'ausschreibungen:preise: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 text-slate-500 font-medium">{{ preispunkt.leistungstyp }}</p>
      <div class="grid grid-cols-3 gap-3 text-sm">
        <div>
          <p class="text-xs text-slate-400">Einzelpreis</p>
          <p class="font-semibold">{% if preispunkt.einzelpreis %}{{ preispunkt.einzelpreis|floatformat:2 }} {{ preispunkt.waehrung }}{% else %}—{% endif %}</p>
        </div>
        <div>
          <p class="text-xs text-slate-400">Gesamtpreis</p>
          <p class="font-semibold">{% if preispunkt.gesamtpreis %}{{ preispunkt.gesamtpreis|floatformat:2 }} {{ preispunkt.waehrung }}{% else %}—{% endif %}</p>
        </div>
        <div>
          <p class="text-xs text-slate-400">Menge</p>
          <p>{% if preispunkt.menge %}{{ preispunkt.menge|floatformat:2 }} {{ preispunkt.mengeneinheit }}{% else %}—{% endif %}</p>
        </div>
      </div>
      {% if preispunkt.kommentar %}
      <p class="text-sm text-slate-600 whitespace-pre-wrap">{{ preispunkt.kommentar }}</p>
      {% endif %}
    </div>

    {% if freigaben %}
    <div class="card">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Freigaben</p>
      <ul class="space-y-2">
        {% for fg in freigaben %}
        <li class="text-sm">
          {% status_badge fg.status fg.get_status_display %}
          <span class="ml-2 text-slate-500">{{ fg.freigebender }}</span>
          {% if fg.kommentar %}<span class="ml-2 text-slate-400 text-xs">— {{ fg.kommentar }}</span>{% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>

  <div class="space-y-4">
    <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">Gewicht: <span class="font-medium">{{ preispunkt.vergleichsgewicht }}</span></p>
      {% if preispunkt.preisstand %}<p class="text-xs text-slate-600">Preisstand: {{ preispunkt.preisstand|date:"d.m.Y" }}</p>{% endif %}
      {% if preispunkt.los %}<p class="text-xs text-slate-600">Los: {{ preispunkt.los }}</p>{% endif %}
      {% if preispunkt.subunternehmer %}<p class="text-xs text-slate-600">Subunternehmer: {{ preispunkt.subunternehmer }}</p>{% endif %}
      {% if preispunkt.laufzeitbezug %}<p class="text-xs text-slate-600">Laufzeit: {{ preispunkt.laufzeitbezug }}</p>{% endif %}
      {% if preispunkt.gewichtungsbegruendung %}<p class="text-xs text-slate-600">Begründung: {{ preispunkt.gewichtungsbegruendung }}</p>{% endif %}
    </div>
    <div class="card space-y-2">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Aktionen</p>
      <a href="{% url 'ausschreibungen:preise:bearbeiten' ausschreibung.pk preispunkt.pk %}" class="btn-secondary text-xs w-full block text-center">Bearbeiten</a>
      <form method="post" action="{% url 'ausschreibungen:preise:loeschen' ausschreibung.pk preispunkt.pk %}">
        {% csrf_token %}
        <button type="submit" class="btn-ghost text-xs w-full text-red-600 mt-1" onclick="return confirm('Preispunkt löschen?')">Löschen</button>
      </form>
    </div>
  </div>
</div>

{% endblock %}