{% extends "base.html" %}
{% from "_macros.html" import field, checkbox %}

{% block title %}{% if mode=='new' %}Neuer Lieferant{% else %}{{ vendor.name }} bearbeiten{% endif %}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/vendors" class="hover:underline">Lieferanten</a> / {% if mode=='new' %}Neu{% else %}Bearbeiten{% endif %}</p>{% endblock %}
{% block heading %}{% if mode=='new' %}Neuer Lieferant{% else %}{{ vendor.name }}{% endif %}{% endblock %}

{% block content %}
{% set current_types = (vendor.vendor_types.split(',') if vendor and vendor.vendor_types else []) %}
<form method="post" action="{% if mode=='new' %}/vendors/new{% else %}/vendors/{{ vendor.id }}/edit{% endif %}" class="card max-w-3xl">
  <div class="card-header"><div><h2>Lieferantendaten</h2></div></div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
    <div class="col-span-2">
      {{ field("Firmenname", "name", vendor.name if vendor else "", required=true) }}
    </div>

    <div class="col-span-2 pt-2 pb-1">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 block mb-2">Lieferanten-Typ (Mehrfachauswahl)</label>
      <div class="flex flex-wrap gap-2">
        {% for code, label in VENDOR_TYPES.items() %}
        <label class="vendor-type-chip" style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;border:1px solid rgba(255,255,255,0.18);background:rgba(20,20,22,0.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;font-size:12px;font-weight:600;color:rgba(255,255,255,0.85);">
          <input type="checkbox" name="vendor_types" value="{{ code }}" {% if code in current_types %}checked{% endif %} style="margin:0;">
          <span>{{ label }}</span>
        </label>
        {% endfor %}
      </div>
      <p class="text-[10px] text-neutral-500 mt-2">Z.B. „Werkzeug-Lieferant" + „Material-Lieferant" gleichzeitig möglich</p>
    </div>

    <div class="col-span-2">
      {{ field("Adresse", "address", vendor.address if vendor else "") }}
    </div>
    {{ field("PLZ", "postcode", vendor.postcode if vendor else "") }}
    {{ field("Stadt", "city", vendor.city if vendor else "") }}
    {{ field("Land", "country", vendor.country if vendor else "Deutschland") }}
    {{ field("Website", "website", vendor.website if vendor else "") }}
    {{ field("Telefon", "phone", vendor.phone if vendor else "") }}
    {{ field("E-Mail", "email", vendor.email if vendor else "", type="email") }}
    {{ field("Ansprechpartner", "contact_name", vendor.contact_name if vendor else "") }}
    <div class="col-span-2 pt-2">
      {{ checkbox("Auto-Bestellung aktivieren (bei Mindestbestand)", "auto_order", checked=(vendor and vendor.auto_order)) }}
    </div>
  </div>
  <style>
    .vendor-type-chip:has(input:checked) {
      background: var(--brand-blue) !important;
      border-color: var(--brand-blue) !important;
      color: white !important;
    }
  </style>
  <div class="px-5 py-4 border-t border-neutral-100 flex items-center justify-between">
    <a class="btn btn-secondary" href="/vendors">Abbrechen</a>
    <button class="btn btn-primary" type="submit">{% if mode=='new' %}Anlegen{% else %}Speichern{% endif %}</button>
  </div>
</form>

{% if mode == 'edit' %}
<form method="post" action="/vendors/{{ vendor.id }}/delete" class="max-w-3xl mt-6"
      onsubmit="return confirm('Lieferant wirklich löschen? (Nur möglich, wenn keine Artikel verknüpft sind.)')">
  <button class="btn btn-danger btn-sm" type="submit">Lieferant löschen</button>
</form>
{% endif %}
{% endblock %}