{% extends 'base_admin.html.twig' %}

{% block title %}Modifier la page : {{ page.title }}{% endblock %}

{% block body %}
    <div class="flex items-center justify-between">
        <h1 class="h1">Modifier la page : {{ page.title }}</h1>
        <a href="{{ path('admin_page_index') }}" class="btn-secondary">Retour à la liste</a>
    </div>

    <div class="card mt-3">
        <div class="card-body">
            {{ form_start(form) }}
            <div class="grid grid-cols-2 gap-2">
                <div>
                    {{ form_row(form.title) }}
                    {{ form_row(form.slug) }}
                </div>
                <div>
                    {{ form_row(form.isOnline) }}
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn-primary">Enregistrer</button>
            </div>
            {{ form_end(form) }}
        </div>
    </div>

    <div class="mt-8">
        <h2 class="h2 mb-3">Blocs de contenu</h2>
        <a href="{{ path('admin_page_block_new', { pageId: page.id }) }}" class="btn-primary">Ajouter un bloc</a>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            {% for block in page.blocks|sort((a, b) => a.position <=> b.position) %}
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-lg font-semibold">Bloc {{ block.position }}</h3>
                        <p class="text-gray-500">Type : {{ block.type|capitalize }}</p>
                        {% if block.type == 'text' or block.type == 'rich_text' %}
                            <p class="mt-2">{{ block.content|raw }}</p>
                        {% elseif block.type == 'image' %}
                            {% if block.image %}
                                <img src="{{ vich_uploader_asset(block, 'imageFile')|imagine_filter('miniature_article_admin') }}" alt="Bloc Image" class="mt-2">
                            {% endif %}
                        {% elseif block.type == 'video' %}
                            {% if block.videoUrl %}
                                <iframe src="{{ block.videoUrl }}" class="w-full h-40 mt-2" allowfullscreen></iframe>
                            {% endif %}
                        {% endif %}

                        <div class="mt-3 flex gap-2">
                            <a href="{{ path('admin_page_block_edit', { id: block.id }) }}" class="btn-secondary">Modifier</a>
                            <confirm-delete data-action="{{ path('admin_page_block_delete', { id: block.id }) }}"></confirm-delete>
                        </div>
                    </div>
                </div>
            {% else %}
                <p class="text-center col-span-full text-gray-500">Aucun bloc ajouté pour cette page.</p>
            {% endfor %}
        </div>
    </div>
{% endblock %}