{% if beziehungen %}
{% for bez in beziehungen %}
{% set partner, rolle = bez.partner_von(kontakt_id) %}
<div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--kw-border);">
    <a href="/kontakte/{{ partner.id }}" style="flex: 1;">{{ partner.anzeigename }}</a>
    <span style="font-size: 0.8rem; color: var(--kw-text-muted);">{{ rolle or bez.typ }}</span>
    <button class="btn-icon" style="font-size: 0.75rem; border: none; padding: 0.2rem;"
            hx-delete="/kontakte/{{ kontakt_id }}/beziehungen/{{ bez.id }}"
            hx-target="#beziehungen-container"
            hx-swap="innerHTML"
            hx-confirm="Beziehung wirklich entfernen?">✕</button>
</div>
{% endfor %}
{% else %}
<p style="font-size: 0.85rem; color: var(--kw-text-muted);">Keine Beziehungen.</p>
{% endif %}

<!-- Inline-Formular -->
<form hx-post="/kontakte/{{ kontakt_id }}/beziehungen"
      hx-target="#beziehungen-container"
      hx-swap="innerHTML"
      style="display: flex; gap: 0.5rem; align-items: end; margin-top: 0.75rem; flex-wrap: wrap;">
    <input type="hidden" name="partner_id" id="bez-partner-id" value="">
    <div style="flex: 1; min-width: 150px;">
        <div class="search-dropdown" style="margin-top: 0;">
            <button type="button" class="search-dropdown-toggle" id="bez-partner-toggle"
                    onclick="var menu=this.nextElementSibling; menu.classList.toggle('open'); if(menu.classList.contains('open')){menu.querySelector('input').value=''; menu.querySelectorAll('.search-dropdown-item').forEach(function(el){el.style.display='';}); menu.querySelector('input').focus();}">
                Kontakt wählen…
            </button>
            <div class="search-dropdown-menu">
                <input type="text" placeholder="Suchen…" autocomplete="off"
                       onclick="event.stopPropagation();"
                       oninput="var q=this.value.toLowerCase(); this.closest('.search-dropdown-menu').querySelectorAll('.search-dropdown-item').forEach(function(el){el.style.display=el.dataset.search.indexOf(q)>=0?'':'none';});">
                {%- for k in alle_kontakte %}
                {%- if k.id != kontakt_id %}
                <div class="search-dropdown-item" data-search="{{ k.anzeigename|lower }}" data-value="{{ k.id }}"
                     onclick="document.getElementById('bez-partner-id').value='{{ k.id }}'; document.getElementById('bez-partner-toggle').textContent='{{ k.anzeigename }}'; this.closest('.search-dropdown-menu').classList.remove('open');">
                    {{ k.anzeigename }}
                </div>
                {%- endif %}
                {%- endfor %}
            </div>
        </div>
    </div>
    <div style="min-width: 120px;">
        <select name="typ" style="margin: 0; font-size: 0.8rem; padding: 0.3rem;">
            {% for opt in kat_optionen("beziehung_typ") %}
            <option value="{{ opt.wert }}">{{ opt.label }}</option>
            {% endfor %}
        </select>
    </div>
    <button type="submit" class="btn-sm" style="margin: 0; padding: 0.3rem 0.6rem;">+</button>
</form>
