{# templates/admin/vehicule_visuel/edit.html.twig #}
{% extends '@EasyAdmin/crud/edit.html.twig' %}

{% block main %}
    {% set visuel = entity.instance ?? null %}
    {% set public_base = supabase_public_url|default('')|trim('/') %}
    {% set bucket = supabase_storage_bucket|default('')|trim('/') %}

    {% if visuel %}
        {% set raw_path = visuel.storagePath|default('')|trim('/') %}
        {% set image_url = '' %}

        {% if public_base and bucket and raw_path %}
            {% set segments = raw_path|split('/') %}
            {% set encoded_segments = [] %}
            {% for segment in segments %}
                {% set encoded_segments = encoded_segments|merge([segment|url_encode]) %}
            {% endfor %}
            {% set image_url = public_base ~ '/storage/v1/object/public/' ~ bucket ~ '/' ~ encoded_segments|join('/') %}
        {% endif %}

        <section class="vehicule-visual-edit-preview" style="margin-bottom: 1.5rem; background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; background: #f8f9fa; border-bottom: 1px solid rgba(0,0,0,0.08);">
                <div>
                    <div style="font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: #6c757d; font-weight: 600;">Aperçu du véhicule</div>
                    <h2 style="margin: 0.25rem 0 0; font-size: 1.25rem;">{{ visuel.vehicule|default('Véhicule') }}{% if visuel.angle %} — {{ visuel.angle|capitalize }}{% endif %}</h2>
                </div>
                <span class="badge {{ visuel.actif ? 'bg-success' : 'bg-secondary' }}" style="font-size: 0.75rem; padding: 0.45rem 0.75rem;">{{ visuel.actif ? 'Actif' : 'Inactif' }}</span>
            </div>

            <div style="padding: 1rem; background: #f8f9fa; text-align: center;">
                {% if image_url %}
                    <img
                        src="{{ image_url }}"
                        alt="Aperçu de {{ visuel.vehicule|default('Véhicule') }}"
                        style="max-width: 100%; max-height: 420px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; background: #fff; padding: 0.25rem;"
                        onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                    >
                    <div class="vehicule-visual-edit-preview__empty" style="display: none; padding: 2rem 1rem; color: #6c757d; font-weight: 600; border: 1px dashed rgba(0,0,0,0.2); border-radius: 8px; background: #fff;">Aperçu indisponible</div>
                {% else %}
                    <div style="padding: 2rem 1rem; color: #6c757d; font-weight: 600; border: 1px dashed rgba(0,0,0,0.2); border-radius: 8px; background: #fff;">Aperçu indisponible</div>
                {% endif %}
            </div>
        </section>
    {% endif %}

    {{ parent() }}
{% endblock %}