{# templates/admin/website_page/index.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Gestion des Pages du Site{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <h1 class="h3 mb-0 text-gray-800"><i class="fas fa-desktop mr-2 text-primary"></i> Mise à jour du Site Web</h1>
        <div class="text-muted">
            <small>Dernière mise à jour : {{ "now"|date("d/m/Y H:i") }}</small>
        </div>
    </div>

    {# Zone d'alerte pour les messages flash #}
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show shadow" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endfor %}
    {% endfor %}

    <div class="row">
        <div class="col-xl-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 font-weight-bold text-primary">Liste des pages administrables</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 align-middle">
                            <thead class="bg-light">
                                <tr>
                                    <th class="pl-4" style="width: 80px;">ID</th>
                                    <th>Nom de la Page</th>
                                    <th>Titre SEO actuel</th>
                                    <th class="text-center">Statistiques</th>
                                    <th class="text-center">Atouts</th>
                                    <th class="text-right pr-4">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for p in pages %}
                                    <tr>
                                        <td class="pl-4 text-muted font-weight-bold">#{{ p.id }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle bg-primary text-white mr-3 d-flex justify-content-center align-items-center" style="width: 35px; height: 35px; border-radius: 50%;">
                                                    <i class="fas {% if p.page == 'ACCUEIL' %}fa-home{% elseif p.page == 'CONTACTS' %}fa-envelope{% elseif p.page == 'GALERIE' %}fa-images{% else %}fa-file-alt{% endif %} fa-sm"></i>
                                                </div>
                                                <span class="font-weight-bold text-dark">{{ p.page }}</span>
                                            </div>
                                        </td>
                                        <td>
<small class="text-muted">{{ p.seoTitre|default('Non configuré')|length > 50 ? p.seoTitre|slice(0, 50) ~ '...' : p.seoTitre }}</small>                                        </td>
                                        <td class="text-center">
                                            <span class="badge badge-pill badge-light border">{{ p.statistiques|length }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge badge-pill badge-light border">{{ p.futures|length }}</span>
                                        </td>
                                        <td class="text-right pr-4">
                                            <a href="{{ path('admin_website_page_edit', {'id': p.id}) }}" class="btn btn-sm btn-primary shadow-sm px-3">
                                                <i class="fas fa-edit mr-1"></i> Mettre à jour
                                            </a>
                                            <a href="#" class="btn btn-sm btn-outline-secondary ml-1" title="Voir sur le site">
                                                <i class="fas fa-external-link-alt"></i>
                                            </a>
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td colspan="6" class="text-center py-5">
                                            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                                            <p class="mb-0">Aucune page n'a été trouvée dans la base de données.</p>
                                            <small class="text-muted">Vérifiez vos fixtures ou votre base GPIM.</small>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-white text-muted small">
                    <i class="fas fa-info-circle mr-1"></i> Cliquez sur "Configurer" pour modifier le Hero, le contenu, le SEO ou les statistiques de la page.
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}