@foreach ($roles as $role)
<div class="col-xl-4 col-lg-6 col-md-6 mb-3">
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <p class="mb-0">@lang('messages.roles.total_users')</p>
                <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
                    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
                        <img class="rounded-circle width-50" src="{{ asset('assets/img/avatars/5.png') }}" alt="Avatar">
                    </li>
                    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
                        <img class="rounded-circle width-50" src="{{ asset('assets/img/avatars/12.png') }}" alt="Avatar">
                    </li>
                    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
                        <img class="rounded-circle width-50" src="{{ asset('assets/img/avatars/6.png') }}" alt="Avatar">
                    </li>
                    <li class="avatar">
                        <span class="avatar-initial rounded-circle pull-up bg-lighter text-body" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
                    </li>
                </ul>
            </div>
            <div class="d-flex justify-content-between align-items-end">
                @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Update Role'))
                    <div class="role-heading">
                        <h5 class="mb-1">{{ $role->name }}</h5>
                        <a href="javascript:;" data-href="{{ route('roles.edit', [$role->id_encrypted]) }}" class="editRole" data-id_role="{{ $role->id_encrypted }}">
                            <span style="color: blue;">@lang('messages.roles.edit_role')</span>
                        </a>
                    </div>
                @endif
                @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Delete Role'))
                    <button type="button"  data-href="{{ url('roles/destroy', '') }}" data-id="{{$role->id_encrypted}}" data-message="Are you sure you want to delete the user?" data-istable="0"  data-table="" class="btn btn-icon btn-danger rounded-pill delete-record">
                        <i class="fa fa-trash"></i>
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>
@endforeach
@if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create Role'))
<div class="col-xl-4 col-lg-6 col-md-6">
    <div class="card h-100">
        <div class="row h-100">
            <div class="col-5">
                <div class="d-flex align-items-end h-100 justify-content-center">
                    <img src="assets/img/illustrations/illustration-3.png" class="img-fluid" alt="Image" width="80">
                </div>
            </div>
            <div class="col-7">
                <div class="card-body text-sm-end text-center ps-sm-0">
                    <button data-target="#addRoleModal" data-toggle="modal"
                        class="btn btn-primary mb-3 text-nowrap add-new-role">@lang('messages.roles.add_roles')</button>
                    <p class="mb-0">@lang('messages.roles.add_roles_if')</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endif