<x-app-layout>
    <x-slot name="header">
        <h1 class="mb-0 uppercase text-3xl">
            {{ __('Roles & Permissions') }}
        </h1>
    </x-slot>

    <div class="py-12">
        <div class="">
            <div class="card mb-lg ">
                <div class="card-header flex justify-between items-center">
                    <h3 class="card-title uppercase">
                        <i class="fas fa-user-shield"></i>
                        Roles
                    </h3>
                    <a href="{{ route('users.index') }}" class="btn-primary inline-flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">Back to Users</a>
                </div>

                <div class="card-body ">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="">Role</th>
                                <th class="">Permissions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($roles as $role)
                                <tr class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8">
                                    <td class="font-semibold">{{ $role->name }}</td>
                                    <td>
                                        @if($role->permissions->isEmpty())
                                            <span class="text-slate-400 text-sm">No permissions</span>
                                        @else
                                            <div class="flex flex-wrap gap-1 mb-2">
                                                @foreach($role->permissions as $permission)
                                                    <span class="px-2 py-1 rounded bg-slate-800 text-white text-xs uppercase tracking-wide">
                                                        {{ $permission->name }}
                                                    </span>
                                                @endforeach
                                            </div>
                                        @endif

                                        <a href="{{ route('roles.edit', $role->id) }}" class="inline-flex items-center px-3 py-1 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                                            Edit
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400">No roles found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>