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

{% block title %}Catégories - Boutique{% endblock %}

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

{% block body %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col">
            <h1>
                <i class="fas fa-folder"></i> Catégories
            </h1>
        </div>
        <div class="col-auto">
            <a href="{{ path('admin_shop_category_new', {siteId: site.id}) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Nouvelle catégorie
            </a>
        </div>
    </div>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success alert-dismissible fade show">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    <div class="card">
        <div class="card-body">
            {% if categories is empty %}
                <div class="text-center py-5">
                    <i class="fas fa-folder fa-4x text-muted mb-3"></i>
                    <p class="text-muted">Aucune catégorie pour le moment</p>
                    <a href="{{ path('admin_shop_category_new', {siteId: site.id}) }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Créer votre première catégorie
                    </a>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Slug</th>
                                <th>Ordre</th>
                                <th>Produits</th>
                                <th>Statut</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for category in categories %}
                                <tr>
                                    <td>
                                        <strong>{{ category.name }}</strong>
                                        {% if category.parent %}
                                            <br><small class="text-muted">Sous-catégorie de {{ category.parent.name }}</small>
                                        {% endif %}
                                    </td>
                                    <td><code>{{ category.slug }}</code></td>
                                    <td>{{ category.displayOrder ?? '-' }}</td>
                                    <td>{{ category.products|length }}</td>
                                    <td>
                                        {% if category.active %}
                                            <span class="badge bg-success">Active</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Inactive</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ path('admin_shop_category_edit', {siteId: site.id, categoryId: category.id}) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form method="post" action="{{ path('admin_shop_category_delete', {siteId: site.id, categoryId: category.id}) }}" style="display: inline;" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette catégorie ?');">
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}