<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{imprimelibros/layout}">

<head>
    <th:block layout:fragment="pagetitle" />
    <th:block th:replace="~{imprimelibros/partials/head-css :: head-css}" />
    <th:block layout:fragment="pagecss">
        <link th:href="@{/assets/css/presupuestador.css}" rel="stylesheet"
            th:unless="${#authorization.expression('isAuthenticated()')}" />
        <link th:href="@{/assets/libs/datatables/dataTables.bootstrap5.min.css}" rel="stylesheet" />
    </th:block>

</head>

<body>

    <div th:replace="~{imprimelibros/partials/topbar   :: topbar}" />
    <div th:replace="~{imprimelibros/partials/sidebar :: sidebar}" />

    <th:block layout:fragment="content">
        <div th:if="${#authorization.expression('isAuthenticated()')}">

            <!-- Modales-->
            <div
                th:replace="imprimelibros/partials/modal-form :: modal('userFormModal', 'usuarios.add', 'modal-md', 'userModalBody')">
            </div>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/"><i class="ri-home-5-fill"></i></a></li>
                    <li class="breadcrumb-item active" aria-current="page" th:text="#{usuarios.titulo}">Usuarios</li>
                </ol>
            </nav>

            <div class="container-fluid">

                <button type="button" class="btn btn-secondary mb-3" id="addUserButton">
                    <i class="ri-add-line align-bottom me-1"></i> <span th:text="#{usuarios.add}">Añadir usuario</span>
                </button>

                <table id="users-datatable" class="table table-striped table-nowrap responsive w-100">
                    <thead>
                        <tr>
                            <th scope="col" th:text="#{usuarios.tabla.id}">ID</th>
                            <th scope="col" th:text="#{usuarios.tabla.nombre}">Nombre</th>
                            <th scope="col" th:text="#{usuarios.tabla.email}">Correo electrónico</th>
                            <th scope="col" th:text="#{usuarios.tabla.rol}">Rol</th>
                            <th scope="col" th:text="#{usuarios.tabla.estado}">Estado</th>
                            <th scope="col" th:text="#{usuarios.tabla.acciones}">Acciones</th>
                        </tr>
                        <tr>
                            <th><input type="text" class="form-control form-control-sm user-filter" data-col="id" />
                            </th>
                            <th><input type="text" class="form-control form-control-sm user-filter"
                                    data-col="fullName" /></th>
                            <th><input type="text" class="form-control form-control-sm user-filter"
                                    data-col="userName" /></th>
                            <th>
                                <select class="form-select form-select-sm user-filter-select" id="search-role">
                                    <option value="" th:text="#{usuarios.todos}">Todos</option>
                                    <option value="USER" th:text="#{usuarios.rol.user}">Usuario</option>
                                    <option value="ADMIN" th:text="#{usuarios.rol.admin}">Administrador</option>
                                    <option value="SUPERADMIN" th:text="#{usuarios.rol.superadmin}">Super Administrador
                                    </option>
                                </select>
                            </th>
                            <th>
                                <select class="form-select form-select-sm user-filter-select" id="search-status">
                                    <option value="" th:text="#{usuarios.todos}">Todos</option>
                                    <option value="true" th:text="#{usuarios.tabla.activo}">Activo</option>
                                    <option value="false" th:text="#{usuarios.tabla.inactivo}">Inactivo</option>
                                </select>
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </th:block>

    <th:block layout:fragment="modal" />
    <th:block th:replace="~{theme/partials/vendor-scripts :: scripts}" />
    <th:block layout:fragment="pagejs">
        <script th:inline="javascript">
            window.languageBundle = /*[[${languageBundle}]]*/ {};
        </script>
        <script th:src="@{/assets/libs/datatables/datatables.min.js}"></script>
        <script th:src="@{/assets/libs/datatables/dataTables.bootstrap5.min.js}"></script>
        <script th:src="@{/assets/js/pages/imprimelibros/users/list.js}"></script>
    </th:block>
</body>

</html>