@extends('layouts.app')
@section('title', 'Roles')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Roles</h2>
        <p class="page-subtitle">Manage user roles and permissions</p>
    </div>
    <x-button type="link" href="{{ route('roles.create') }}">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Add Role
    </x-button>
</div>

<div class="table-container dark:bg-dark-card dark:border-dark-border">
    <div class="overflow-x-auto scrollbar-thin">
        <table class="min-w-full divide-y divide-gray-100 dark:divide-dark-border text-sm">
            <thead>
                <tr>
                    <th class="table-th dark:text-dark-muted">Role Name</th>
                    <th class="table-th dark:text-dark-muted">Slug</th>
                    <th class="table-th text-center dark:text-dark-muted">Permissions Count</th>
                    <th class="table-th text-right dark:text-dark-muted">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50 dark:divide-dark-border">
                @forelse($roles as $role)
                <tr class="table-row dark:hover:bg-dark-surface">
                    <td class="table-td font-medium"><a href="{{ route('roles.show', $role) }}" class="hover:underline text-gray-900 dark:text-dark-text">{{ $role->name }}</a></td>
                    <td class="table-td font-mono text-xs text-gray-500 dark:text-dark-muted">{{ $role->slug }}</td>
                    <td class="table-td text-center">
                        <span class="badge badge-indigo">{{ $role->permissions_count ?? $role->permissions->count() }} permissions</span>
                    </td>
                    <td class="table-td text-right">
                        <x-row-actions
                            :edit-url="route('roles.edit', $role)"
                            :delete-url="route('roles.destroy', $role)"
                            item-name="role"
                        />
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-12 text-center">
                        <div class="w-16 h-16 rounded-2xl bg-gray-50 dark:bg-dark-surface flex items-center justify-center mx-auto mb-3">
                            <svg class="w-8 h-8 text-gray-300 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        </div>
                        <p class="text-sm font-medium text-gray-900 dark:text-dark-text">No roles found</p>
                        <p class="text-xs text-gray-500 dark:text-dark-muted mt-1">Get started by creating a new role.</p>
                        <a href="{{ route('roles.create') }}" class="btn-primary mt-4 inline-flex">Add Role</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<x-pagination :paginator="$roles" />
@endsection