@extends('layouts.admin')

@section('page_kicker', 'Access control')
@section('page_title', 'Roles')

@section('content')
    <div class="flex flex-wrap items-center justify-between gap-4">
        <p class="text-sm text-slate-600">Roles map to Spatie <code class="rounded bg-slate-100 px-1 text-xs">roles</code> (guard web). Assign permissions on edit.</p>
        <a href="{{ route('superadmin.rbac.roles.create') }}" class="admin-btn-primary">Add role</a>
    </div>

    <div class="admin-content-card mt-6">
        <div class="admin-table-wrap">
            <table class="admin-table min-w-full">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Permissions</th>
                        <th class="w-40 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($roles as $role)
                        <tr>
                            <td class="font-medium">{{ $role->name }}</td>
                            <td class="text-sm text-slate-600">{{ $role->permissions_count }}</td>
                            <td class="text-right">
                                <a href="{{ route('superadmin.rbac.roles.edit', $role) }}" class="admin-btn-secondary text-xs py-1.5">Edit</a>
                                <form method="POST" action="{{ route('superadmin.rbac.roles.destroy', $role) }}" class="ms-2 inline" onsubmit="return confirm('Delete this role?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="admin-btn-danger inline-flex text-xs py-1.5">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="text-slate-500">No roles.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-5 border-t border-slate-100 pt-4">{{ $roles->links() }}</div>
    </div>

    <p class="mt-6 text-center text-sm text-slate-500">
        <a href="{{ route('superadmin.rbac.permissions.index') }}" class="font-semibold text-teal-700 hover:text-teal-900">Manage permissions</a>
    </p>
@endsection