@php
    $operationColorClass = $user->is_admin ? 'danger' : 'warning';
@endphp

<div id="toggleRoleModal-{{ $user->id }}">
    <div class="modal fade" id="toggleRoleUserModal-{{ $user->id }}" tabindex="-1" aria-labelledby="toggleRoleUserModal-{{ $user->id }}-label" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h1 class="modal-title fs-5" id="toggleRoleUserModal-{{ $user->id }}-label">Change <strong>{{ $user->name }}</strong>'s Role</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">

                <div class="alert alert-{{ $operationColorClass }}">
                    <h6 class="m-1 p-0 text-center fw-semibold">Confirm operation:</h6>
                    <p class="m-1 p-0 text-center">Change <strong>{{ $user->name }}</strong>'s role to {{ $user->is_admin ? 'Client' : 'Admin' }}</p>
                </div>

                <h5 class="text-center">Are you sure?</h5>

                <form class="toggleRoleUserForm" data-user-id="{{ $user->id }}" action="{{ route('users.toggleRole',$user->id) }}" method="POST">
                    @csrf
                    {{-- <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="skipToggleRoleModal" id="skiptoggleRoleUserModal">
                        <label class="form-check-label" for="skipToggleRoleModal">Do not ask again</label>
                    </div> --}}
                    @method('PUT')
                </form>
            </div>
            <div class="modal-footer justify-content-between">
            <button type="button" class="toggleRoleUserButton fw-bold col-md-5 col-sm-12 btn btn-{{ $operationColorClass }}" data-user-id="{{ $user->id }}">Yes</button>
            <button type="button" class="col-md-5 col-sm-12 btn btn-secondary" data-bs-dismiss="modal">No</button>
            </div>
        </div>
        </div>
    </div>
</div>