{{-- backend/roles_permissions/_row.blade.php --}}
@php
    $colors = ['bg-primary', 'bg-info', 'bg-success', 'bg-warning', 'bg-danger', 'bg-secondary'];
    $color = $colors[abs(crc32($role->name)) % count($colors)];
    $initials = strtoupper(substr($role->name, 0, 2));
    $permCount = is_object($role) && method_exists($role, 'permissions') ? $role->permissions()->count() : 0;
    $userCount = \App\Models\User::role($role->name)->count();
    $protectedRole = in_array(
        strtolower(str_replace([' ', '_'], '-', $role->name)),
        ['super-admin', 'superadmin'],
        true,
    );
@endphp

<tr class="hover-shadow" data-id="{{ $role->id }}">
    <td>
        <div class="d-flex align-items-center gap-2">
            <div class="avatar {{ $color }} text-white">{{ $initials }}</div>
            <div class="fw-semibold role-name">{{ $role->name }}</div>
        </div>
    </td>
    <td><span class="badge bg-light text-dark permissions-count">{{ $permCount }} Permissions</span></td>
    <td><span class="badge bg-light text-dark users-count">{{ $userCount }} Users</span></td>
    <td>
        <span class="badge bg-{{ $role->status ? 'info' : 'danger' }} text-white">
            {{ $role->status ? 'Active' : 'Inactive' }}
        </span>
    </td>
    <td class="text-end">
        <div class="dropdown">
            <i class="bx bx-dots-vertical-rounded" data-bs-toggle="dropdown" style="cursor:pointer;"></i>
            <ul class="dropdown-menu dropdown-menu-end">
                @if ($protectedRole)
                    <li>
                        <span class="dropdown-item disabled">
                            <i class="bx bx-lock me-2"></i>Protected
                        </span>
                    </li>
                @else
                    <li>
                        <a class="dropdown-item user-btn" href="#" data-id="{{ $role->id }}">
                            <i class="bx bx-user me-2"></i>Users
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item perm-btn" href="#" data-id="{{ $role->id }}">
                            <i class="bx bx-key me-2"></i>Permissions
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item edit-btn" href="#" data-id="{{ $role->id }}">
                            <i class="bx bx-edit me-2"></i>Edit
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item text-danger delete-btn" href="#" data-id="{{ $role->id }}">
                            <i class="bx bx-trash me-2"></i>Delete
                        </a>
                    </li>
                @endif
            </ul>
        </div>
    </td>
</tr>