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

{% block title %}Catégories de blog{% endblock %}

{% block breadcrumb %}Blog <i class="fas fa-chevron-right"></i> Catégories{% endblock %}

{% block description %}Organisez vos articles en catégories{% endblock %}

{% block body %}
    <div style="max-width: 1200px; margin: 0 auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <div>
                <h1 style="font-size: 1.75rem; font-weight: 700; color: #1e293b; margin: 0;">Catégories de blog</h1>
                <p style="color: #64748b; margin-top: 0.5rem;">Organisez vos articles en catégories (News, Stories, etc.)</p>
            </div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newCategoryModal" style="background: var(--primary-gradient); border: none; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600;">
                <i class="fas fa-plus"></i> Nouvelle catégorie
            </button>
        </div>

        {% for message in app.flashes('success') %}
            <div class="alert alert-success alert-dismissible fade show" role="alert" style="border-radius: 8px; background: #10b981; color: white; border: none;">
                <i class="fas fa-check-circle"></i> {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}

        {% if categories is empty %}
            <div style="text-align: center; padding: 4rem 2rem; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                <i class="fas fa-folder-open" style="font-size: 4rem; color: #cbd5e1; margin-bottom: 1rem;"></i>
                <h3 style="color: #475569; font-size: 1.25rem; margin-bottom: 0.5rem;">Aucune catégorie</h3>
                <p style="color: #94a3b8; margin-bottom: 1.5rem;">Créez votre première catégorie pour organiser vos articles</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newCategoryModal" style="background: var(--primary-gradient); border: none;">
                    <i class="fas fa-plus"></i> Créer une catégorie
                </button>
            </div>
        {% else %}
            <div style="background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden;">
                <table style="width: 100%; border-collapse: collapse;">
                    <thead style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                        <tr>
                            <th style="padding: 1rem; text-align: left; font-weight: 600;">Nom</th>
                            <th style="padding: 1rem; text-align: left; font-weight: 600;">Description</th>
                            <th style="padding: 1rem; text-align: center; font-weight: 600;">Articles</th>
                            <th style="padding: 1rem; text-align: center; font-weight: 600; width: 150px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for category in categories %}
                            <tr style="border-bottom: 1px solid #e2e8f0;">
                                <td style="padding: 1rem;">
                                    <strong style="color: #1e293b;">{{ category.name }}</strong>
                                    <br><small style="color: #94a3b8;">{{ category.slug }}</small>
                                </td>
                                <td style="padding: 1rem; color: #64748b;">{{ category.description ?: '-' }}</td>
                                <td style="padding: 1rem; text-align: center;">
                                    <span class="badge bg-primary">{{ category.posts|length }} article{{ category.posts|length > 1 ? 's' : '' }}</span>
                                </td>
                                <td style="padding: 1rem; text-align: center;">
                                    <button class="btn btn-sm btn-primary" style="background: var(--primary-gradient); border: none; margin: 0 2px;"
                                            data-bs-toggle="modal" data-bs-target="#editCategoryModal{{ category.id }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <form method="post" action="{{ path('bo-blog-category-delete', {id: category.id}) }}" style="display: inline;">
                                        <button type="button" class="btn btn-sm btn-danger" style="margin: 0 2px;" onclick="showConfirmModal({
                                            title: 'Supprimer la catégorie',
                                            message: 'Êtes-vous sûr de vouloir supprimer cette catégorie ? Les articles ne seront pas supprimés.',
                                            actionText: 'Supprimer',
                                            onConfirm: () => this.closest('form').submit()
                                        })">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>

                            <!-- Modal d'édition pour chaque catégorie -->
                            <div class="modal fade" id="editCategoryModal{{ category.id }}" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content" style="border-radius: 12px; border: none;">
                                        <div class="modal-header" style="border-bottom: 1px solid #e2e8f0;">
                                            <h5 class="modal-title">Modifier la catégorie</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form method="post" action="{{ path('bo-blog-category-edit', {id: category.id}) }}">
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label class="form-label fw-semibold">Nom <span style="color: #ef4444;">*</span></label>
                                                    <input type="text" name="name" class="form-control" value="{{ category.name }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label fw-semibold">Description</label>
                                                    <textarea name="description" class="form-control" rows="3">{{ category.description }}</textarea>
                                                </div>
                                            </div>
                                            <div class="modal-footer" style="border-top: 1px solid #e2e8f0;">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                                <button type="submit" class="btn btn-primary" style="background: var(--primary-gradient); border: none;">
                                                    <i class="fas fa-save"></i> Enregistrer
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>

    <!-- Modal de nouvelle catégorie -->
    <div class="modal fade" id="newCategoryModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 12px; border: none;">
                <div class="modal-header" style="border-bottom: 1px solid #e2e8f0;">
                    <h5 class="modal-title">Nouvelle catégorie</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="post" action="{{ path('bo-blog-category-new') }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Nom <span style="color: #ef4444;">*</span></label>
                            <input type="text" name="name" class="form-control" placeholder="Ex: News, Stories, Actualités..." required>
                            <small class="text-muted">Un slug sera généré automatiquement</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Description</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="Description de la catégorie (optionnel)"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer" style="border-top: 1px solid #e2e8f0;">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-primary" style="background: var(--primary-gradient); border: none;">
                            <i class="fas fa-plus"></i> Créer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}