Forge Database User Permissions code

@props([
    'users' => [],
])

@php
    /*
    | Database users and permissions table. Each user accepts username, host,
    | databases, readonly and status keys.
    |
    | Usage:
    |   <x-ui.forge-database-user-permissions :users="$users" />
    */
    $users = collect($users)->map(function (array $user): array {
        return [
            'username' => $user['username'] ?? $user['name'] ?? 'forge',
            'host' => $user['host'] ?? '%',
            'databases' => collect($user['databases'] ?? [])->filter()->values(),
            'readonly' => (bool) ($user['readonly'] ?? false),
            'status' => $user['status'] ?? 'Active',
        ];
    })->values();
@endphp

<section {{ $attributes->merge(['class' => 'min-w-0 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}>
    <div class="border-b border-gray-200 px-4 py-3 dark:border-gray-800">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Database users</h3>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Review database access and read-only users.</p>
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-[42rem] divide-y divide-gray-200 text-sm dark:divide-gray-800">
            <thead class="bg-gray-50 text-xs text-gray-500 dark:bg-gray-950/40 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-4 py-3 text-left font-medium whitespace-nowrap">User</th>
                    <th scope="col" class="px-4 py-3 text-left font-medium whitespace-nowrap">Databases</th>
                    <th scope="col" class="px-4 py-3 text-left font-medium whitespace-nowrap">Access</th>
                    <th scope="col" class="px-4 py-3 text-left font-medium whitespace-nowrap">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                @forelse ($users as $user)
                    <tr>
                        <td class="px-4 py-3">
                            <p class="font-mono font-medium text-gray-900 dark:text-white">{{ $user['username'] }}</p>
                            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ $user['host'] }}</p>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap gap-1.5">
                                @forelse ($user['databases'] as $database)
                                    <x-ui.badge variant="gray" size="sm">{{ $database }}</x-ui.badge>
                                @empty
                                    <span class="text-gray-500 dark:text-gray-400">No databases</span>
                                @endforelse
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <x-ui.badge :variant="$user['readonly'] ? 'blue' : 'brand'" size="sm">
                                {{ $user['readonly'] ? 'Read only' : 'Read/write' }}
                            </x-ui.badge>
                        </td>
                        <td class="px-4 py-3">
                            <x-ui.badge variant="green" size="sm" dot>{{ $user['status'] }}</x-ui.badge>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400">No database users found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>