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

{% block title %}Œuvres{% endblock %}
{% block main_container %}
    {% block body %}
        <div class="relative w-screen min-h-screen overflow-hidden text-ink font-serif">
            <!-- Image de fond -->
            <img src="{{ asset('uploads/bg_oeuvres.webp') }}" alt="Fond Œuvres"
                 class="absolute inset-0 w-full h-full object-cover z-0">
            <!-- Overlay pour lisibilité -->
            <div class="absolute inset-0 bg-[#3d2c20] bg-opacity-60 z-0"></div>

            <!-- Contenu principal -->
            <div class="relative z-10 px-4 sm:px-6 lg:px-8 py-12 max-w-7xl mx-auto">
                <h1 class="text-5xl font-bold mb-8 text-center text-white">Œuvres</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                    {% for oeuvre in oeuvres %}
                        {% embed 'components/_card.html.twig' %}
                            {% block card_title %}
                                <h2 class="text-2xl font-bold text-accent mb-2 text-center">
                                    <a href="{{ path('app_oeuvre_show', {'slug': oeuvre.slug}) }}" class="hover:underline">
                                        {{ oeuvre.titre }}
                                    </a>
                                </h2>
                            {% endblock %}
                            {% block card_author %}
                                {% if article is defined and article.author is not null %}
                                    <p class="text-sm italic text-right text-gray-500 mt-2">
                                        par {{ article.author.pseudo }}
                                    </p>
                                {% elseif oeuvre is defined and oeuvre.user is not null %}
                                    <p class="text-sm italic text-right text-gray-500 mt-2">
                                        par {{ oeuvre.user.pseudo }}
                                    </p>
                                {% endif %}
                            {% endblock %}

                            {% block card_subtitle %}
                                <p class="text-gray-700 italic text-center">{{ oeuvre.type }}</p>
                            {% endblock %}

                            {% block card_content %}
                                <div class="text-gray-800 text-justify">{{ oeuvre.description|striptags|slice(0, 200)|replace({
                                        '&eacute;': 'é',
                                        '&egrave;': 'è',
                                        '&ecirc;': 'ê',
                                        '&agrave;': 'à',
                                        '&nbsp;': ' ',
                                        '&rsquo;': '\'',
                                        '&lsquo;': '\'',
                                        '&quot;': '"',
                                        '&amp;': '&'
                                    }) ~ '…' }}
                                </div>
                            {% endblock %}

                            {% block card_footer %}
                                <div class="flex justify-end space-x-4 mt-4">
                                    <div class="flex items-center text-gray-600 text-sm">
                                        📚 {{ oeuvre.articles|length }} article{{ oeuvre.articles|length > 1 ? 's' : '' }}
                                    </div>
                                    <a href="{{ path('app_oeuvre_show', {'slug': oeuvre.slug}) }}"
                                       class="text-blue-600 hover:text-blue-800" title="Voir">📖</a>
                                    {% if is_granted('OEUVRE_EDIT', oeuvre) %}
                                    <a href="{{ path('app_oeuvre_edit', {'slug': oeuvre.slug}) }}"
                                       class="text-yellow-600 hover:text-yellow-800" title="Modifier">✏️</a>
                                    {% endif %}
                                </div>
                            {% endblock %}
                        {% endembed %}
                    {% else %}
                        <p class="col-span-3 text-center text-white">Aucune œuvre trouvée.</p>
                    {% endfor %}
                </div>

                <div class="mt-8 text-center">
                    {% if is_granted('ROLE_USER')%}
                    <a href="{{ path('app_oeuvre_new') }}"
                       class="inline-block bg-accent hover:bg-amber-950 text-white px-6 py-3 rounded-full shadow-lg text-lg transition">
                        ➕ Créer une nouvelle œuvre
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}