<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div class="card my-5" ng-show="show_search_form">
                <div class="card-header">
                    <h4>B&uacute;squeda de empleado.</h4>
                    <a ui-sref="main.usuarios_lista" class="float-right btn btn-lg" title="Regresar"><i class="fas fa-angle-double-left"></i></a>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <form ng-submit="buscarEmpleado()" name="searchForm" novalidate autocomplete="off">
                                <h4>Buscar por nombre</h4>
                                <div class="form-group">
                                    <div class="input-group">
                                        <input class="form-control" type="text" ng-model="form_search_empleado.nombre" id="nombre" placeholder="Nombre"  required/>
                                        <span class="input-group-btn">
                                            <button type="submit" class="btn btn-outline-primary float-right"><i class="fas fa-search"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-group list-group-flush" ng-if="empleados.length > 0">
                                <li ng-repeat="empleado in empleados" class="list-group-item">
                                    <label class="iswitch iswitch-md bg-dark float-left mr-3">
                                        <input type="checkbox" ng-model="empleado.is_checked" ng-change="select_empleado(empleado)">
                                        <i></i>
                                    </label>
                                    {{empleado.empleado_nombre}} {{empleado.apellido_paterno}} {{empleado.apellido_materno}}
                                </li>
                            </ul>
                            <div ng-repeat="empleado in empleados" ng-if="empeados.length == 0">
                                No hay empleados que coincidan con la busqueda
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card my-5" ng-if="show_form">
                <form ng-submit="submit()" novalidate autocomplete="off">
                    <div class="card-header">
                        <button class="btn btn-outline-danger btn-sm float-right ml-2" type="button" title="cerrar" ng-click="openCancelDialog()"><i class="fas fa-times"></i></button>
                        <h4>{{(action ==="create")?"Crear":"Editar"}} Usuario</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                Empleado:
                                <strong>{{empleado_selected.empleado_nombre}} {{empleado_selected.apellido_paterno}} {{empleado_selected.apellido_materno}}</strong>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="rol_id">Rol:*</label>
                                <select ng-model="form_usuario.rol_id" name="rol_id" id="rol_id" required 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 form-group">
                                <label for="username">Nombre de usuario:*</label>
                                <input class="form-control" type="text" ng-model="form_usuario.username" id="username" name="username" placeholder="Nombre de usuario" maxlength="250" required/>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="username">Correo:*</label>
                                <input class="form-control" type="text" ng-model="form_usuario.email" id="email" name="email" placeholder="Correo" maxlength="250" required/>
                            </div>
                        </div>
                        <div>
                            <small>* campos obligatorios</small>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-md btn-outline-success">guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>