{# Expanded detail for a single flat, loaded into #flat-detail-<id> via HTMX. #}
{% if enrichment_status == 'pending' %}
<div class="px-4 py-5 text-sm text-slate-500">Analyse läuft – kommt in wenigen Augenblicken zurück…</div>
{% elif enrichment_status == 'failed' %}
<div class="px-4 py-5 text-sm text-slate-500">
    Detail-Analyse konnte nicht abgerufen werden.
    <a href="{{ flat.link }}" target="_blank" rel="noopener">Zur Original-Anzeige →</a>
</div>
{% else %}
<div class="px-4 py-4 space-y-4">
    {% if image_urls %}
    <div class="flat-gallery">
        {% for src in image_urls %}
        <a class="flat-gallery-tile" href="{{ src }}" target="_blank" rel="noopener">
            <img src="{{ src }}" loading="lazy" alt="Foto {{ loop.index }}">
        </a>
        {% endfor %}
    </div>
    {% endif %}

    {% if enrichment and enrichment.description %}
    <p class="text-sm text-slate-700">{{ enrichment.description }}</p>
    {% endif %}

    {% if enrichment %}
    <div class="grid grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-1.5 text-xs">
        {% macro kv(label, value) %}
            {% if value is not none and value != '' %}
            <div class="flex justify-between gap-3 border-b border-soft py-1">
                <span class="text-slate-500">{{ label }}</span>
                <span class="text-slate-800 text-right">{{ value }}</span>
            </div>
            {% endif %}
        {% endmacro %}
        {{ kv('Adresse', enrichment.address) }}
        {{ kv('Zimmer', enrichment.rooms) }}
        {{ kv('Größe', enrichment.size_sqm ~ ' m²' if enrichment.size_sqm else none) }}
        {{ kv('Kaltmiete', enrichment.rent_cold ~ ' €' if enrichment.rent_cold else none) }}
        {{ kv('Nebenkosten', enrichment.utilities ~ ' €' if enrichment.utilities else none) }}
        {{ kv('Gesamtmiete', enrichment.rent_total ~ ' €' if enrichment.rent_total else none) }}
        {{ kv('Kaution', enrichment.deposit ~ ' €' if enrichment.deposit else none) }}
        {{ kv('Bezugsfrei ab', enrichment.available_from) }}
        {{ kv('Etage', enrichment.floor) }}
        {{ kv('Heizung', enrichment.heating) }}
        {{ kv('Energieausweis', enrichment.energy_certificate) }}
        {{ kv('Energiewert', enrichment.energy_value) }}
        {{ kv('Baujahr', enrichment.year_built) }}
        {{ kv('WBS', 'erforderlich' if enrichment.wbs_required else ('nicht erforderlich' if enrichment.wbs_required == false else none)) }}
        {{ kv('WBS-Typ', enrichment.wbs_type) }}
    </div>
    {% endif %}

    {% if enrichment and enrichment.features %}
    <div class="flex flex-wrap gap-1.5">
        {% for f in enrichment.features %}<span class="chip chip-info">{{ f }}</span>{% endfor %}
    </div>
    {% endif %}

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {% if enrichment and enrichment.pros %}
        <div>
            <div class="text-xs uppercase tracking-wide text-slate-500 mb-1">Pro</div>
            <ul class="text-sm space-y-1">
                {% for p in enrichment.pros %}<li>+ {{ p }}</li>{% endfor %}
            </ul>
        </div>
        {% endif %}
        {% if enrichment and enrichment.cons %}
        <div>
            <div class="text-xs uppercase tracking-wide text-slate-500 mb-1">Contra</div>
            <ul class="text-sm space-y-1">
                {% for c in enrichment.cons %}<li>− {{ c }}</li>{% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>

    <div class="text-xs">
        <a href="{{ flat.link }}" target="_blank" rel="noopener">Zur Original-Anzeige →</a>
    </div>
</div>
{% endif %}