<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div class="mt-5">
                <a class="btn btn-sm btn-success float-right rounded-0 ml-2" ui-sref="main.rol_agregar" title="Agregar Rol" ng-if="(modulos_acciones_list | contains:'1610202')"><i class="fas fa-plus"></i> <span class="d-none d-md-inline-block">NUEVO</span></a>
                <h3>Roles</h3>
            </div>
            <div class="card my-5" ng-repeat="rol in roles">
                <div class="card-header card-header-sticky">
                    <div class="float-right">
                        <a class="btn btn-sm btn-outline-primary float-right ml-2" title="Editar rol" ui-sref="main.rol_editar({rol_id: rol.id})" ng-if="(modulos_acciones_list | contains:'1610203')"><i class="fas fa-edit"></i></a>
                        <button type="button" ng-click="mostrarUsuarios(rol)" class="btn btn-sm ml-2 btn-info float-right" ng-if="!rol.show_usuarios" title="Ver usuarios"><i class="fas fa-users"></i></button>
                        <button type="button" ng-click="ocultarUsuarios(rol)" class="btn btn-sm ml-2 btn-primary float-right" ng-if="rol.show_usuarios" title="Ocultar usuarios"><i class="fas fa-users"></i></button>
                        <button type="button" ng-click="mostrarModulos(rol)" class="btn btn-sm ml-2 btn-info float-right" ng-if="!rol.show_modulos" title="Ver permisos"><i class="fas fa-bars"></i></button>
                        <button type="button" ng-click="ocultarModulos(rol)" class="btn btn-sm ml-2 btn-primary float-right" ng-if="rol.show_modulos" title="Ocultar permisos"><i class="fas fa-bars"></i></button>
                    </div>
                    <h4>{{rol.rol_nombre}}</h4>
                </div>
                <div class="card-body">
                    <div ng-if="rol.show_usuarios">
                        <h3>Usuarios</h3>
                        <div ng-if="rol.usuarios.length > 0">
                            <ul class="list-group list-group-flush ml-5">
                                <li class="list-group-item form-switches py-1" ng-repeat="usuario in rol.usuarios">
                                    {{usuario.username}}
                                </li>
                            </ul>
                        </div>
                        <div class="p-5 text-center" ng-if="rol.usuarios.length === 0">
                            No hay usuarios con este rol.
                        </div>
                    </div>
                    <div ng-if="rol.show_modulos">
                        <div ng-if="rol.grupos_modulos.length > 0">
                            <div ng-repeat="grupo in rol.grupos_modulos">
                                <h3>Módulos</h3>
                                <div ng-repeat="categoria in grupo.categorias">
                                    <h4 class="border-bottom my-3 py-2"><span class="badge badge-{{categoria.clase}} mr-4"><i class="{{categoria.icono}}"></i></span> {{categoria.nombre_categoria}}</h4>
                                    <div ng-repeat="modulo in categoria.modulos" class="ml-2 ml-sm-5">
                                        <div class="border-bottom mt-3 py-3">
                                            <div class="float-right ml-5">
                                                <label class="iswitch iswitch-md bg-info float-right ml-2">
                                                    <input type="checkbox" ng-model="modulo.is_checked" ng-change="add_remove_checked_modulo(rol, modulo)" title="{{modulo.is_checked ? 'Desactivar':'Activar'}} todos" ng-if="(modulos_acciones_list | contains:'1610204')">
                                                    <i></i>
                                                </label>
                                                <small class="">{{modulo.is_checked ? "Desactivar":"Activar"}} todos</small>
                                            </div>
                                            <span class="h5"><span class="badge badge-{{categoria.clase}} mr-2">&nbsp;</span> {{modulo.nombre_modulo}}</span>
                                        </div>
                                        <div>
                                            <ul class="list-group list-group-flush ml-2 ml-sm-5">
                                                <li class="list-group-item form-switches py-1" ng-repeat="accion in modulo.acciones">
                                                    <label class="iswitch iswitch-md bg-info float-left mr-2">
                                                        <input type="checkbox" ng-model="accion.is_checked" ng-change="add_remove_permisos(rol, accion, modulo)" ng-if="(modulos_acciones_list | contains:'1610204')">
                                                        <i></i>
                                                    </label>
                                                    <div>{{accion.nombre_accion}}</div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>