<div class="row justify-content-center my-2">
    <!-- Loading -->
    <div id="loadingModalRole" class="row justify-content-center d-none">
        <div class="col-12 col-md-3 mt-5">
            <div class="spinner-border text-fidelitas"></div><span class="text-fidelitas fs-2 ms-2">@traducir('Cargando','Cargando')...</span>
        </div>
    </div>
    <form id="frmAsignarUsers" class="d-flex col-md-10">
        {{csrf_field()}}
        <input type="hidden" name="id_role" value="{{$id_role}}">
        <!-- selector usuarios -->
        <div class="text-start col-lg-8 col-md-8 mt-2 mb-4">
            <span class="text-muted">@traducir('texto_usuarios_role','Elegir los usuarios para el role')</span>
            <select style="cursor:pointer;" name="usuario" id="usuario" class="form-select" aria-placeholder="usuarios" autocomplete="off" required>
                @foreach( $usuarios_disponibles  as $user )
                    <option value="{{ $user->user_id }}">{{$user->usuario}}</option>
                @endforeach
            </select>
        </div>
        <!--  -->
        <div class="d-flex align-items-end justify-content-center col-lg-4 col-md-2 mt-2 mb-4">
            <button type="submit" class="btn btn-sm btn-outline-primary"><i class="bi bi-plus-circle"></i> @traducir('Asignar','Asignar')</button>
            <!-- <i type="submit" class="btn p-0 text-primary bi bi-person-circle fs-4" title="@traducir('Asignar','Asignar')"> @traducir('Asignar','Asignar')</i> -->
        </div>
    </form>
    <div class="col-lg-10 col-md-12">
        <table class="table table-hover" id="tablaModalUserRol">
            <thead class="table-header-fidelitas">
                <tr>
                    <th class="d-none"></th>
                    <th>@traducir('Nombre y apellido','Nombre y apellido')</th>
                    <!-- <th>@traducir('Activo','Activo')</th> -->
                    <th class="text-center">@traducir('Estado','Estado')</th>
                </tr>
            </thead>
            <tbody>
                @foreach( $usuarios as $usuario )
                <tr>
                    <td class="d-none">{{ $usuario->id_rol }}</td>
                    <td>{{ $usuario->first_name }} {{ $usuario->last_name }}</td>
                    {{--<td>
                        @if( $usuario->user_rol_activo == '1' )
                            <h4 class="text-success"><i class="bi bi-check-lg"></i></h4>
                        @else
                            <h4 class="text-danger"><i class="bi bi-x-lg"></i></h4>
                        @endif
                    </td>--}}
                    <td class="text-center">
                        @if( $usuario->user_rol_activo == 1 )
                            {{--<button type="button" data-id-role="{{ $usuario->id_rol }}" data-id-user="{{$usuario->id_usuario}}" data-user-role="{{ $usuario->idUserRole }}" data-accion="D" class="btn btn-sm btn-outline-danger btnActdesactRole">
                            <i class="bi bi-person-dash"></i> @traducir('Desactivar','Desactivar')
                            </button>--}}
                            <i type="button" class="btn p-0 text-success bi bi-check-circle-fill fs-4 btnActdesactRole" title="@traducir('Desactivar','Desactivar')" data-id-role="{{ $usuario->id_rol }}" data-id-user="{{$usuario->id_usuario}}" data-user-role="{{ $usuario->idUserRole }}" data-accion="D"></i>
                        @else
                            {{--<button type="button" data-id-role="{{ $usuario->id_rol }}" data-id-user="{{$usuario->id_usuario}}" data-user-role="{{ $usuario->idUserRole }}" data-accion="A" class="btn btn-sm btn-outline-success btnActdesactRole">
                            <i class="bi bi-person-plus"></i> @traducir('Activar','Activar')
                            </button>--}}
                            <i type="button" class="btn p-0 text-danger bi bi-x-circle-fill fs-4 btnActdesactRole" title="@traducir('Activar','Activar')" data-id-role="{{ $usuario->id_rol }}" data-id-user="{{$usuario->id_usuario}}" data-user-role="{{ $usuario->idUserRole }}" data-accion="A"></i>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<script>
    $(document).ready(function(){
        eventosDesacActivarRoles();
    });
</script>