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

{% block title %}Categories{% endblock %}

{% block page_title %}
    Liste des catégories
{% endblock %}

{% block breadcrumb %}
    {% include '_breadcrumb.html.twig' with {
        breadcrumbs: [
            { label: 'Catégories', path: path('app_category_index') }
        ]
    } %}{% endblock %}

{% block content %}


    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h4 mb-0">Catégories</h2>
        <a href="{{ path('app_category_new') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> Nouvelle catégorie
        </a>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover align-middle">
            <thead class="table-dark">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Titre</th>
                <th scope="col">Slug</th>
                <th scope="col">Description</th>
                <th scope="col">Nbr Galeries</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>

            <tbody>
            {% for category in categories %}
                <tr>
                    <td>{{ category.id }}</td>
                    <td>{{ category.title }}</td>
                    <td>{{ category.slug }}</td>
                    <td>
                        {{ category.description|slice(0, 100) }}{% if category.description|length > 100 %}…{% endif %}
                    </td>
                    <td>{{ category.galleries|length }}</td> {# Compte les galeries #}
                    <td>
                        <div class="btn-group" role="group">
                            <a href="{{ path('app_category_show', {'id': category.id}) }}" class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="{{ path('app_category_edit', {'id': category.id}) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </div>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="6" class="text-center text-muted">Aucune catégorie trouvée.</td>
                </tr>
            {% endfor %}
            </tbody>

        </table>
    </div>
{% endblock %}