{% extends "basis.html" %}
{% block titel %}Bearbeiten{% endblock %}
{% block inhalt %}

<h1 class="text-xl font-bold mb-4">
    {{ 'Entwurf nachtragen' if item.status == 'draft' else 'Bearbeiten' }}
</h1>

<div class="grid md:grid-cols-2 gap-5">
    <div class="karte">
        {% if item.bilder %}
            <img src="/uploads/{{ item.hauptbild.image_url }}" alt=""
                 class="w-full object-cover">
            {% if item.bilder|length > 1 %}
                <div class="grid grid-cols-4 gap-1 p-1">
                    {% for b in item.bilder %}
                        <img src="/uploads/{{ b.image_url }}" alt="" loading="lazy"
                             class="aspect-square object-cover rounded-lg
                                    {{ 'ring-2 ring-marke-600' if b.is_primary }}">
                    {% endfor %}
                </div>
            {% endif %}
        {% else %}
            <div class="aspect-[3/4] grid place-items-center text-slate-300 dark:text-slate-600">kein Bild</div>
        {% endif %}
    </div>

    <form method="post" action="/kleid/{{ item.id }}/bearbeiten"
          enctype="multipart/form-data" class="karte p-4 space-y-4">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        {% include "_felder.html" %}

        <div>
            <label class="etikett" for="fotos">Weitere Fotos</label>
            <input class="feld py-2" id="fotos" type="file" name="dateien"
                   accept="image/*" multiple>
        </div>

        <button class="knopf-haupt w-full">
            {{ 'Veröffentlichen' if item.status == 'draft' else 'Speichern' }}
        </button>
        {% if item.status != 'draft' %}
            <a href="/kleid/{{ item.id }}" class="knopf-still w-full">Abbrechen</a>
        {% endif %}
    </form>
</div>

{% endblock %}