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

{% block title %}Usuarios | Bizkai Sida{% endblock %}

{% block stylesheets %}

    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">

{% endblock %}

{% block body %}

<div class="section-box">

    <!-- Header sección -->
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div class="d-flex align-items-center">
            <div class="page-title-icon">
                <i class="fa-solid fa-users fs-3"></i>
            </div>
            <h2 class="fw-bold text-dark mb-0">Gestión de usuarios</h2>
        </div>

        <a href="{{ path('app_user_new') }}" class="btn btn-orange fw-bold">
            <i class="fa-solid fa-plus fs-4 me-2"></i> Nuevo usuario
        </a>
    </div>

    <!-- Tabla -->
    <div class="table-responsive">
        <table id="tablaUsuarios"
               class="table align-middle table-row-dashed fs-6 gy-5"
               style="width: 100%;">
            <thead>
            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                <th>ID</th>
                <th>Nombre</th>
                <th>Apellidos</th>
                <th>Email</th>
                <th>Roles</th>
                <th>Estado</th>
                <th>Acciones</th>
            </tr>
            </thead>
        </table>
    </div>

</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#tablaUsuarios').DataTable({
                responsive: true,
                autoWidth: false,
                ajax: {
                    url: '{{ path("admin_users_data") }}',
                    type: 'POST'
                },
                columns: [
                    { data: 'id' },
                    { data: 'firstName' },
                    { data: 'lastName' },
                    { data: 'email' },
                    { data: 'roles' },
                    { data: 'estado' },
                    { data: 'acciones', orderable: false, searchable: false }
                ],
                language: {
                    url: '/assets/js/datatables/es-ES.json'
                },
            });
        });
    </script>
{% endblock %}