<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Roles & permissions') }}
            </h2>
            <div class="flex items-center gap-2">
                <a href="{{ route('admin.permissions') }}" class="btn btn-outline btn-sm gap-1" wire:navigate>
                    <x-heroicon-o-table-cells class="w-4 h-4" /> {{ __('Matrix view') }}
                </a>
                <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm gap-1" wire:navigate>
                    <x-heroicon-o-plus class="w-4 h-4" /> {{ __('New role') }}
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white rounded-lg shadow p-6">
                <livewire:admin.role-table />
            </div>
        </div>
    </div>
</x-app-layout>
