{% extends "base.html" %}
{% block title %}{{ titel }}{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto">
  <div class="flex items-center justify-between mb-4">
    <h1 class="page-title">{{ titel }}</h1>
    <a href="{% url 'ausschreibungen:preise:liste' ausschreibung.pk %}" class="btn-ghost text-xs">← Zurück</a>
  </div>

  <form method="post" x-data="{ subunternehmer: {{ form.subunternehmeranteil.value|yesno:'true,false' }} }" class="space-y-4">
    {% csrf_token %}

    <datalist id="leistungstypen-list">
      {% for lt in leistungstypen %}<option value="{{ lt }}">{% endfor %}
    </datalist>

    <div class="card space-y-4">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Leistung</p>
      <div>
        <label class="form-label">Leistungstyp *</label>
        {{ form.leistungstyp }}
        {% if form.leistungstyp.errors %}<p class="text-xs text-red-600 mt-1">{{ form.leistungstyp.errors.0 }}</p>{% endif %}
      </div>
      <div>
        <label class="form-label">Konkrete Leistung *</label>
        {{ form.konkrete_leistung }}
        {% if form.konkrete_leistung.errors %}<p class="text-xs text-red-600 mt-1">{{ form.konkrete_leistung.errors.0 }}</p>{% endif %}
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="form-label">Menge</label>
          {{ form.menge }}
        </div>
        <div>
          <label class="form-label">Einheit</label>
          {{ form.mengeneinheit }}
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="form-label">Wiederkehrend</label>
          {{ form.wiederkehrend }}
        </div>
        <div>
          <label class="form-label">Laufzeitbezug</label>
          {{ form.laufzeitbezug }}
        </div>
      </div>
    </div>

    <div class="card space-y-4">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Preis</p>
      <div class="grid grid-cols-3 gap-4">
        <div>
          <label class="form-label">Einzelpreis</label>
          <input name="einzelpreis" id="id_einzelpreis" class="form-input"
                 type="number" step="0.01"
                 value="{{ form.einzelpreis.value|default:'' }}"
                 x-model="einzelpreis"
                 @input="gesamtpreis = (einzelpreis && menge) ? (parseFloat(einzelpreis) * parseFloat(menge)).toFixed(2) : gesamtpreis">
          {% if form.einzelpreis.errors %}<p class="text-xs text-red-600 mt-1">{{ form.einzelpreis.errors.0 }}</p>{% endif %}
        </div>
        <div>
          <label class="form-label">Gesamtpreis</label>
          <input name="gesamtpreis" id="id_gesamtpreis" class="form-input"
                 type="number" step="0.01"
                 value="{{ form.gesamtpreis.value|default:'' }}"
                 x-model="gesamtpreis">
        </div>
        <div>
          <label class="form-label">Währung</label>
          {{ form.waehrung }}
        </div>
      </div>
      <div>
        <label class="form-label">Preisstand</label>
        {{ form.preisstand }}
      </div>
    </div>

    <div class="card space-y-4">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Vergleichsgewicht</p>
      <div>
        <label class="form-label">Gewicht</label>
        {{ form.vergleichsgewicht }}
        {% if form.vergleichsgewicht.errors %}<p class="text-xs text-red-600 mt-1">{{ form.vergleichsgewicht.errors.0 }}</p>{% endif %}
        <p class="text-xs text-slate-400 mt-1">0,0 = nicht gewertet · 1,0 = Standard · 2,0 = doppelt gewichtet</p>
      </div>
      <div>
        <label class="form-label">Begründung</label>
        {{ form.gewichtungsbegruendung }}
      </div>
    </div>

    <div class="card space-y-4">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wide">Zuordnung</p>
      <div>
        <label class="form-label">Los</label>
        {{ form.los }}
      </div>
      <div>
        <label class="form-label flex items-center gap-2">
          <span x-ref="subLabel" @click="subunternehmer = !subunternehmer">Subunternehmeranteil</span>
          {{ form.subunternehmeranteil }}
        </label>
      </div>
      <div x-show="subunternehmer">
        <label class="form-label">Subunternehmer</label>
        {{ form.subunternehmer }}
      </div>
    </div>

    <div class="card">
      <label class="form-label">Kommentar</label>
      {{ form.kommentar }}
    </div>

    <div class="flex gap-3">
      <button type="submit" class="btn-primary">Speichern</button>
      <a href="{% url 'ausschreibungen:preise:liste' ausschreibung.pk %}" class="btn-ghost">Abbrechen</a>
    </div>
  </form>
</div>
{% endblock %}