{% extends 'articles/base_articles.html.twig' %}

{% block title %}Articles{% endblock %}

{% block body %}
    <h1 class="text-5xl font-bold mb-8 text-center text-white">📜 Articles</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
        {% for article in articles %}
            {% embed 'components/_card.html.twig' %}
                {% block card_title %}
                    <h2 class="text-2xl font-bold text-accent mb-2 text-center">
                        <a href="{{ path('app_article_show', {
                            slugOeuvre: article.oeuvre.slug,
                            slug: article.slug
                        }) }}" class="hover:underline">
                            {{ article.title }}
                        </a>
                    </h2>
                {% endblock %}

                {% block card_subtitle %}
                    <p class="text-gray-700 italic text-center">{{ article.status.value|capitalize }}</p>
                {% endblock %}

                {% block card_content %}
                    <div class="text-gray-800 text-justify truncate">{{ article.content|raw }}</div>
                {% endblock %}

                {% block card_footer %}
                    {% if is_granted('ARTICLE_EDIT', article) %}
                    <div class="flex justify-end space-x-4 mt-4">
                        <a href="{{ path('app_article_show', {
                            slugOeuvre: article.oeuvre.slug,
                            slug: article.slug
                        }) }}"
                           class="text-blue-600 hover:text-blue-800" title="Voir">📖</a>
                        <a href="{{ path('app_article_edit', {
                            slugOeuvre: article.oeuvre.slug,
                            slug: article.slug}) }}"
                           class="text-yellow-600 hover:text-yellow-800" title="Modifier">✏️</a>
                    </div>
                    {% endif %}
                {% endblock %}
            {% endembed %}
        {% else %}
            <p class="col-span-3 text-center text-white">Aucun article trouvé.</p>
        {% endfor %}
    </div>

    <div class="mt-8 text-center">
        {% if is_granted('ROLE_USER') %}
        <a href="{{ path('app_articles_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 un nouvel article
        </a>
        {% endif %}
    </div>
{% endblock %}