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

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

{% block body %}
<div class="background-image d-flex justify-content-center align-items-start pt-5">
    <div class="container bg-light bg-opacity-75 rounded p-4 shadow">
    <div class="col d-flex justify-content-between align-items-center mb-3">
    <h1>Liste de catégories</h1>
    <a href="{{ path('app_categories_new') }}" class="btn btn-success mb-3">Créer une nouvelle catégorie</a>
    </div>
<div class="responsive-table">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name_category</th>
                <th>actions</th>
            </tr>
        </thead>
        <tbody>
        {% for category in categories %}
            <tr>
                <td data-label="Id">{{ category.id }}</td>
                <td data-label="Nom">{{ category.nameCategory }}</td>
                <td data-label="Actions">
                    <a href="{{ path('app_categories_show', {'id': category.id}) }}" class="btn btn-sm btn-secondary w-100 mb-1">Détails</a>
                    <a href="{{ path('app_categories_edit', {'id': category.id}) }}" class="btn btn-sm btn-primary w-100">Modifier</a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="3">no records found</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

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