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

{% block title %}Livre d'or{% endblock %}
{% block breadcrumb %}Livre d'or{% endblock %}
{% block description %}Modérez les messages laissés par vos visiteurs{% endblock %}

{% block body %}
    {% for type, flashes in app.flashes(['success', 'danger']) %}
        {% for message in flashes %}
            <div class="alert alert-{{ type }} d-flex align-items-center mb-3" role="alert">
                <i class="fas fa-{{ type == 'success' ? 'check-circle' : 'exclamation-triangle' }} me-2"></i>
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}

    <div style="background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden;">
        <div style="padding: 1.5rem; border-bottom: 1px solid #e2e8f0;">
            <h2 style="margin: 0; font-size: 1.25rem; font-weight: 600; color: #1e293b;">
                <i class="fas fa-book-open me-2" style="color: #667eea;"></i>
                Livre d'or
                {% if pendingCount > 0 %}
                    <span class="badge bg-warning text-dark ms-2">{{ pendingCount }} en attente</span>
                {% endif %}
            </h2>
            <p style="margin: 0.25rem 0 0; color: #64748b; font-size: 0.9rem;">
                {{ messages|length }} message(s) — collectés par le widget « Livre d'or ».
                Seuls les messages publiés apparaissent sur votre site.
            </p>
        </div>

        {% if messages is empty %}
            <div style="padding: 4rem 2rem; text-align: center; color: #64748b;">
                <div style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.4;">
                    <i class="fas fa-book-open"></i>
                </div>
                <h3 style="font-size: 1.1rem; color: #1e293b;">Aucun message pour le moment</h3>
                <p style="max-width: 460px; margin: 0.5rem auto 1.5rem;">
                    Ajoutez le widget « Livre d'or » sur une de vos pages pour permettre à vos
                    visiteurs de vous laisser un message.
                </p>
            </div>
        {% else %}
            <div style="overflow-x: auto;">
                <table class="table mb-0" style="min-width: 640px;">
                    <thead>
                        <tr style="background: #f8fafc;">
                            <th style="padding: 0.9rem 1.5rem;">Message</th>
                            <th style="padding: 0.9rem 1.5rem; white-space: nowrap;">Auteur / Date</th>
                            <th style="padding: 0.9rem 1.5rem;">Statut</th>
                            <th style="padding: 0.9rem 1.5rem; text-align: right;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for message in messages %}
                            <tr {% if message.status == 'pending' %}style="background: #fffbeb;"{% endif %}>
                                <td style="padding: 0.9rem 1.5rem; max-width: 420px;">
                                    {{ message.message|nl2br }}
                                </td>
                                <td style="padding: 0.9rem 1.5rem; white-space: nowrap;">
                                    <strong>{{ message.authorName }}</strong><br>
                                    <span style="color: #64748b; font-size: 0.85rem;">
                                        {{ message.createdAt ? message.createdAt|date('d/m/Y H:i') : '—' }}
                                    </span>
                                </td>
                                <td style="padding: 0.9rem 1.5rem;">
                                    {% if message.approved %}
                                        <span class="badge bg-success">Publié</span>
                                    {% else %}
                                        <span class="badge bg-warning text-dark">En attente</span>
                                    {% endif %}
                                </td>
                                <td style="padding: 0.9rem 1.5rem; text-align: right; white-space: nowrap;">
                                    {% if message.approved %}
                                        <form method="post" action="{{ path('bo-guestbook-unpublish', {'id': message.id}) }}" class="d-inline">
                                            <input type="hidden" name="_token" value="{{ csrf_token('guestbook-' ~ message.id) }}">
                                            <button type="submit" class="btn btn-sm btn-outline-secondary" title="Retirer du site">
                                                <i class="fas fa-eye-slash"></i> Dépublier
                                            </button>
                                        </form>
                                    {% else %}
                                        <form method="post" action="{{ path('bo-guestbook-approve', {'id': message.id}) }}" class="d-inline">
                                            <input type="hidden" name="_token" value="{{ csrf_token('guestbook-' ~ message.id) }}">
                                            <button type="submit" class="btn btn-sm btn-success" title="Publier sur le site">
                                                <i class="fas fa-check"></i> Publier
                                            </button>
                                        </form>
                                    {% endif %}
                                    <form method="post" action="{{ path('bo-guestbook-remove', {'id': message.id}) }}" class="d-inline"
                                          onsubmit="return confirm('Supprimer définitivement ce message ?');">
                                        <input type="hidden" name="_token" value="{{ csrf_token('guestbook-' ~ message.id) }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer définitivement">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
{% endblock %}