@extends('layouts.app')

@section('title', 'Roles')

@section('content')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => route('dashboard')],
        ['label' => 'Administration'],
        ['label' => 'Roles'],
    ]" />

    <x-page-header title="Roles" subtitle="Manage roles and permission assignments">
        <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1" aria-hidden="true"></i> Add Role
        </a>
    </x-page-header>

    <x-card flush>
        @if ($roles->isEmpty())
            <x-empty-state icon="shield-lock" title="No roles found">
                <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm">Create Role</a>
            </x-empty-state>
        @else
            <x-table :headers="['Role', 'Slug', 'Users', 'Permissions', 'Actions']">
                @foreach ($roles as $role)
                    <tr>
                        <td>
                            <a href="{{ route('admin.roles.show', $role) }}" class="fw-medium">{{ $role->name }}</a>
                            @if ($role->description)
                                <div class="small text-muted">{{ Str::limit($role->description, 60) }}</div>
                            @endif
                        </td>
                        <td><code>{{ $role->slug }}</code></td>
                        <td>{{ $role->users_count }}</td>
                        <td>{{ $role->permissions_count }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-outline-secondary">Edit</a>
                                <a href="{{ route('admin.roles.show', $role) }}" class="btn btn-outline-primary">View</a>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </x-table>
            @if ($roles->hasPages())
                <div class="p-3 border-top">{{ $roles->links() }}</div>
            @endif
        @endif
    </x-card>
@endsection
