<style type="text/css">
    .table-plain{
        width: 100%;
        border-bottom: 1px solid #dee2e6
    }
    .table-striped .table-plain tbody tr:nth-of-type(2n+1){
        background-color: transparent;
    }
    .table-plain tbody td {
        background-color: transparent;
        padding: 2px .75rem;
    }
    .table-plain .actions {
        width: 10%;
        min-width: 50px;
        text-align: right;
    }
</style>
<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div ng-if="!show_list" class="text-center">
                <img src="images/searching.gif" class="img-fluid" alt=""/>
            </div>
            <div ng-if="show_list" class="card my-5">
                <div class="card-header">
                    <div u-data-filter u-form-model="filter_form">
                        <div class="row">
                            <div class="col-sm-6 col-md-4 col-lg-3 form-group">
                                <label>Estatus</label>
                                <select ng-model="filter_form.status.value" class="form-control">
                                    <option value="1">Activo</option>
                                    <option value="-1">Inactivo</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-md-4 col-lg-3 form-group">
                                <label>Roles de usuarios</label>
                                <select ng-model="filter_form.rol_id.value" class="form-control">
                                    <option value="">Selecciona un rol</option>
                                    <option ng-repeat="rol in roles" ng-value="rol.id">{{rol.rol_nombre}}</option>
                                </select>
                            </div>
                            <div class="col-sm-6 col-md-4 col-lg-3 form-group">
                                <label>Identificador</label>
                                <input name="search_identificador" ng-model="filter_form.identificador.value" class="form-control">
                            </div>
                        </div>
                    </div>
                    <a class="btn btn-sm btn-success float-right rounded-0 ml-2" ui-sref="main.usuario_agregar" title="Agregar usuario" ng-if="(modulos_acciones_list | contains:'1610102')"><i class="fas fa-plus"></i> NUEVO</a>
                    <h3>Usuarios</h3>
                </div>
                <div class="card-body">
                    <div class="max-h-table">
                        <table class="table table-striped table-responsive-md" ng-if="usuarios.length > 0">
                            <thead class="thead-dark">
                                <tr>
                                    <th>
                                        Empleado
                                    </th>
                                    <th>
                                        Nombre de usuario
                                    </th>
                                    <th>
                                        Email
                                    </th>
                                    <th class="actions">
                                        Acciones
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="usuario in usuarios">
                                    <td>
                                        <div><small>{{usuario.tipo_empleado_abreviado}}{{usuario.identificador|zeroFillNumber:5}}</small></div>
                                        {{usuario.apellido_paterno}} {{usuario.apellido_materno}} {{usuario.empleado_nombre}}
                                    </td>
                                    <td>
                                        {{usuario.username}}
                                    </td>
                                    <td>
                                        {{usuario.email}}
                                    </td>
                                    <td class="actions">
                                        <a class="btn btn-sm btn-outline-primary float-right ml-2" title="Editar usuario" ui-sref="main.usuario_editar({usuario_id: usuario.id})" ng-if="usuario.status === '1' && (modulos_acciones_list | contains:'1610103')"><i class="fas fa-edit"></i></a>
                                        <button class="btn btn-sm btn-outline-danger float-right ml-2" title="Inactivar usuario" ng-click="inactivateUsuario(usuario)" ng-if="usuario.status === '1' && (modulos_acciones_list | contains:'1610104')"><i class="fas fa-trash"></i></button>
                                        <button class="btn btn-sm btn-outline-success float-right ml-2" title="Reactivar usuario" ng-click="reactivateUsuario(usuario.id)" ng-if="usuario.status === '-1' && (modulos_acciones_list | contains:'1610105')"><i class="fas fa-trash-restore"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="text-center">
                            <div u-data-pagination by-page="by_page" total="total_usuarios" class="btn-group" role="group" aria-label="páginas">
                            </div>
                        </div>
                    </div>
                    <div class="p-5 text-center" ng-if="usuarios.length === 0">
                        No hay usuarios que coincidan con la búsqueda.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>