{% extends 'layout/app.html.twig' %}

{% block title %}Aperçu de l'import - Portail{% endblock %}
{% block breadcrumb %}<a href="{{ path('app_admin_requests') }}" class="hover:underline">Demandes</a> / Importer / Aperçu{% endblock %}

{% block app_content %}
    {% set photoCount = payload.photos|length %}
    {% set questionCount = payload.openQuestions|length %}

    <p class="font-structure text-xs uppercase tracking-wide text-pepite-ink/50">Aperçu — rien n'est encore créé</p>
    <h1 class="mt-1 font-display text-2xl text-pepite-ink">{{ payload.name }}</h1>
    <p class="mt-1 font-structure text-sm text-pepite-ink/60">Référence {{ payload.reference }}</p>

    <div class="mt-6 max-w-3xl rounded-md border border-gray-200 bg-white p-4 text-sm">
        <dl class="grid gap-x-6 gap-y-2 sm:grid-cols-2">
            <div><dt class="text-xs text-pepite-ink/50">Besoin</dt><dd>{{ payload.need ?? 'à confirmer' }}</dd></div>
            <div><dt class="text-xs text-pepite-ink/50">Contenu</dt>
                <dd>{{ photoCount }} photo{{ photoCount > 1 ? 's' : '' }} · {{ questionCount }} question{{ questionCount > 1 ? 's' : '' }} · {{ payload.specs|length }} caractéristique{{ payload.specs|length > 1 ? 's' : '' }}</dd></div>
        </dl>

        {% if payload.photos is not empty %}
            <div class="mt-4 flex flex-wrap gap-2">
                {% for photo in payload.photos %}
                    <img data-role="preview-photo" src="{{ path('app_admin_request_import_photo', { token: token, index: loop.index0 }) }}" alt="{{ photo.filename }}"
                         class="h-24 w-24 rounded border border-gray-200 object-contain {{ loop.first ? 'ring-2 ring-pepite-gold' : '' }}">
                {% endfor %}
            </div>
            <p class="mt-1 text-[11px] text-pepite-ink/40">La première photo (encadrée) sera la photo principale.</p>
        {% else %}
            <p class="mt-4 text-pepite-ink/60">Aucune photo dans ce fichier.</p>
        {% endif %}

        {% if payload.openQuestions is not empty %}
            <p class="mt-4 text-xs text-pepite-ink/50">Questions posées au sourceur</p>
            <ul class="mt-1 list-disc pl-5">
                {% for key in payload.openQuestions %}<li>{{ sheet_question_topic(key) }}</li>{% endfor %}
            </ul>
        {% endif %}
    </div>

    <div class="mt-4 flex max-w-3xl flex-wrap gap-3">
        <form method="post" action="{{ path('app_admin_request_import_confirm', { token: token }) }}">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('request_import_' ~ token) }}">
            <button type="submit" class="rounded-md bg-pepite-navy px-4 py-2 font-structure text-sm font-medium text-white hover:bg-pepite-navy-light">Confirmer l'import</button>
        </form>
        <form method="post" action="{{ path('app_admin_request_import_cancel', { token: token }) }}">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('request_import_' ~ token) }}">
            <button type="submit" class="rounded-md border border-gray-300 px-4 py-2 font-structure text-sm text-pepite-ink/70 hover:bg-gray-50">Annuler</button>
        </form>
    </div>
{% endblock %}