{# Eine Kachel in der Galerie. Eigene Datei, weil HTMX beim Filtern nur die
   Liste austauscht und dieselbe Darstellung braucht. #}
<a href="/kleid/{{ item.id }}" class="karte block group">
    <div class="aspect-[3/4] bg-slate-100 dark:bg-slate-700">
        {% if item.hauptbild %}
            <img src="/uploads/{{ item.hauptbild.image_url }}"
                 alt="{{ item.anzeige_titel }}" loading="lazy"
                 class="w-full h-full object-cover">
        {% else %}
            <div class="w-full h-full grid place-items-center text-slate-300 dark:text-slate-600 text-sm">
                kein Bild
            </div>
        {% endif %}
    </div>
    <div class="p-3">
        <p class="font-semibold leading-tight">{{ item.anzeige_titel }}</p>
        <p class="text-sm text-slate-500 dark:text-slate-400 dark:text-slate-500 mt-1">
            {{ groesse_text(item) }}
        </p>
        {% if item.status == 'reserved' %}
            {# Bewusst ohne Namen: die Galerie ist öffentlich, der Name steht
               nur in der Verwaltung. #}
            <span class="inline-block mt-2 text-xs font-semibold rounded-full
                         px-2 py-0.5 bg-amber-100 dark:bg-amber-900 text-amber-900 dark:text-amber-100">reserviert</span>
        {% elif item.status == 'given_away' %}
            <span class="inline-block mt-2 text-xs font-semibold rounded-full
                         px-2 py-0.5 bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300">abgegeben</span>
        {% endif %}
    </div>
</a>