@extends('layouts.app')
@section('title', 'Roles · Settings')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
    <li class="breadcrumb-item active" aria-current="page">Roles</li>
@endsection

@section('content')
    <x-layout.page-header title="Roles & permissions" subtitle="Fine-grained access control for your team." icon="people">
        <x-slot:actions>
            @can('create', App\Models\Role::class)
                <x-ui.button variant="primary" icon="plus-lg" :href="route('settings.roles.create')">
                    New role
                </x-ui.button>
            @endcan
        </x-slot:actions>
    </x-layout.page-header>

    @include('pages.settings._tabs', ['active' => 'roles'])

    <x-ui.card padding="none">
        <x-ui.table :rows="$roles->all()" empty="No roles configured yet.">
            <x-slot:head>
                <tr>
                    <th>Role</th>
                    <th>Description</th>
                    <th class="text-center">Users</th>
                    <th class="text-center">Permissions</th>
                    <th class="text-end">Actions</th>
                </tr>
            </x-slot:head>

            @foreach($roles as $role)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <span class="role-swatch role-swatch--{{ Str::slug($role->name) }}"></span>
                            <div>
                                <div class="fw-semibold">{{ Str::title(str_replace('_',' ', $role->name)) }}</div>
                                <div class="text-muted small">{{ $role->name }}</div>
                            </div>
                            @if($role->is_system)
                                <x-ui.badge tone="info">System</x-ui.badge>
                            @endif
                        </div>
                    </td>
                    <td class="text-muted">{{ $role->description ?: '—' }}</td>
                    <td class="text-center">{{ $role->users_count ?? 0 }}</td>
                    <td class="text-center">{{ $role->permissions_count ?? $role->permissions->count() }}</td>
                    <td class="text-end">
                        @can('update', $role)
                            <x-ui.button size="sm" variant="ghost" icon="pencil"
                                :href="route('settings.roles.edit', $role)">
                                Edit
                            </x-ui.button>
                        @endcan
                        @can('delete', $role)
                            <button type="button" class="btn btn-ghost btn-sm text-danger"
                                data-bs-toggle="modal" data-bs-target="#delete-role-{{ $role->id }}">
                                {!! icon('trash') !!}
                            </button>
                            <x-ui.confirm-modal
                                :id="'delete-role-' . $role->id"
                                title="Delete role?"
                                :message="'This will remove the role \"' . $role->name . '\" and detach it from all users.'"
                                confirm-label="Delete role"
                                :form="route('settings.roles.destroy', $role)"
                                method="DELETE" />
                        @endcan
                    </td>
                </tr>
            @endforeach
        </x-ui.table>
    </x-ui.card>
@endsection