{% extends 'oeuvres/base_oeuvres.html.twig' %}

{% block title %}Détail de l'œuvre{% endblock %}

{% block body %}
    <div class="max-w-4xl mx-auto px-4 py-8">
        <!--présentation de l'oeuvres-->
        <div class="bg-[#fdf6e3] p-8 rounded-xl shadow-md mx-auto">
            <h1 class="text-4xl font-serif text-center mb-6 border-b pb-2">🎨 {{ oeuvre.titre }}</h1>

            <div class="mt-8 flex justify-between items-center">
                <a href="{{ path('app_oeuvre_index') }}"
                   class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded shadow text-sm">
                    ← Retour à la liste
                </a>

                <div class="flex gap-4 items-center">
                    {% if app.user and (is_granted('ROLE_ADMIN') or is_granted('OEUVRE_EDIT', oeuvre)) %}
                    <a href="{{ path('app_articles_new_for_oeuvre', {'slug': oeuvre.slug}) }}"
                       class="flex items-center bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded shadow text-sm">
                        ➕ Ajouter un article
                    </a>
                    {% endif %}
                    {% if is_granted('OEUVRE_EDIT', oeuvre) %}
                    <a href="{{ path('app_oeuvre_edit', {'slug': oeuvre.slug}) }}"
                       class="flex items-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow text-sm">
                        ✏️ Modifier
                    </a>

                    {{ include('oeuvres/_delete_form.html.twig') }}
                    {% endif %}
                </div>
            </div>

            <div class="space-y-4 text-gray-800 font-light text-lg mt-6">
                <div>
                    <h2 class="font-semibold text-gray-600">Type :</h2>
                    <p>{{ oeuvre.type }}</p>
                </div>

                <div>
                    <h2 class="font-semibold text-gray-600">Slug :</h2>
                    <p>{{ oeuvre.slug }}</p>
                </div>

                <div>
                    <h2 class="font-semibold text-gray-600">Description :</h2>
                    <div class="prose max-w-none">{{ oeuvre.description|raw }}</div>
                </div>
            </div>
        </div>
        <!--Sommaire des articles-->
        <div class="mt-8 max-w-4xl mx-auto">
            <h2 class="text-2xl font-semibold mb-4 text-white">Sommaire :</h2>
            {% include 'components/_search_bar.html.twig' with {
                'input_id': 'articleSearch',
                'js_callback': 'searchFilters.filterArticles',
                'placeholder': 'Rechercher un article...'
            } %}
            <div id="sommaire">
                <p id="noResultsMessage" class="mt-4 text-center text-white italic hidden">
                    Aucun article ne correspond à votre recherche.
                </p>
            {% if articles is not empty %}
                <ul class="space-y-2">
                    <div class="space-y-2" id="sommaire">
                        {% for article in articles %}
                            {% include 'components/_article_summary.html.twig' %}
                        {% endfor %}
                    </div>
                </ul>
            {% else %}
                <p class="text-gray-600 italic">Aucun article lié à cette œuvre.</p>
            {% endif %}
            </div>
        </div>
        </div>
{% endblock %}