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

{% block title %}Back office : Article index{% endblock %}

{% block body %}
     <div class="max-w-screen-lg mx-auto px-6 py-8 bg-[#fdf6e3] rounded-xl shadow">
        <h1 class="text-4xl font-serif text-center mb-4 text-gray-800">📜 Article Index</h1>

        <div class="text-center mb-6">
            <a href="{{ path('app_homepage') }}"
               class="mt-2 inline-block bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300 shadow">
                <i class="fas fa-arrow-left mr-2"></i> Retour au site
            </a>
        </div>

        <div class="text-right mb-4">
            <a href="{{ path('app_admin_article_new') }}"
               class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded hover:bg-green-700 shadow">
                <i class="fas fa-plus mr-2"></i> Créer un nouvel article
            </a>
        </div>

        <table class="w-full text-left border-collapse bg-white shadow rounded-lg overflow-hidden">
            <thead class="text-sm text-gray-700 uppercase bg-amber-100 border-b border-amber-300">
            <tr>
                <th class="px-6 py-3">Id</th>
                <th class="px-6 py-3">Titre</th>
                <th class="px-6 py-3">Slug</th>
                <th class="px-6 py-3">Contenu</th>
                <th class="px-6 py-3">Créé le</th>
                <th class="px-6 py-3">Mis à jour</th>
                <th class="px-6 py-3">Statut</th>
                <th class="px-6 py-3">Actions</th>
            </tr>
            </thead>
            <tbody>
            {% for article in articles %}
                <tr class="over:bg-amber-50 dark:hover:bg-amber-600 border-b">
                    <td class="px-6 py-4 text-right font-bold">{{ article.id }}</td>
                    <td class="px-6 py-4 font-medium text-gray-900">{{ article.title }}</td>
                    <td class="px-6 py-4 text-sm text-gray-700">{{ article.slug }}</td>
                    <td class="px-6 py-4 text-sm text-gray-700 truncate max-w-xs">{{ article.content }}</td>
                    <td class="px-6 py-4 text-sm text-gray-700">{{ article.createdAt ? article.createdAt|date('Y-m-d H:i') : '' }}</td>
                    <td class="px-6 py-4 text-sm text-gray-700">{{ article.updatedAt ? article.updatedAt|date('Y-m-d H:i') : '' }}</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 text-xs font-semibold rounded
                            {{ article.status.value == 'publié'
                        ? 'bg-green-200 text-green-800'
                        : 'bg-yellow-200 text-yellow-800' }}">
                            {{ article.status.value|capitalize }}
                        </span>
                    </td>

                    <td class="px-6 py-4 text-right flex gap-2 justify-end">
                        <a href="{{ path('app_admin_article_show', {'id': article.id}) }}"
                           class="text-blue-600 hover:text-blue-800" title="Voir">
                            <i class="fas fa-eye"></i>
                        </a>
                        &nbsp;&nbsp;
                        <a href="{{ path('app_admin_article_edit', {'id': article.id}) }}"
                           class="text-yellow-600 hover:text-yellow-800" title="Modifier">
                            <i class="fas fa-pen-to-square"></i>
                        </a>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="8" class="px-6 py-4 text-center text-gray-500">Aucun article trouvé.</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>


{% endblock %}