@extends('layouts.app')

@section('title', 'User Permission Management')

@section('page-css')
<style>
.permission-state {
    transition: all 0.2s ease-in-out;
}

.permission-state:hover {
    transform: scale(1.05);
}
</style>
@endsection

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    @livewire('user-permission-manager')
</div>
@endsection

@section('page-script')
<script>
document.addEventListener('livewire:init', function () {
    Livewire.on('permissionUpdated', () => {
        // Optional: Add any additional UI feedback
        console.log('Permission updated successfully');
    });
});
</script>
@endsection