<div class="permission-list">
    <x-title>
        Permissions

        <x-slot:buttons>
            <a href="{{ route('admin.permissions.create') }}"
               class="btn btn-success waves-effect waves-light">
                <i class="mdi mdi-plus me-2"></i>
                Add Permission
            </a>
        </x-slot:buttons>
    </x-title>

    <div class="row">
        {{-- MAIN --}}
        <div class="col-12 col-md-9">
            <div class="card">
                <div class="card-body">

                    {{-- CONTROLS --}}
                    <div class="row align-items-end mb-3">
                        <div class="col-4">
                            <label class="form-label">Per Page</label>
                            <select class="form-select" wire:model.live="perPage">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>
                        </div>

                        <div class="col-4"></div>

                        <div class="col-4">
                            <label class="form-label">Search</label>
                            <input class="form-control"
                                   wire:model.live.debounce.300ms="search"
                                   placeholder="Search permissions…">
                        </div>
                    </div>

                    {{-- TABLE --}}
                    <div class="table-responsive">
                        <table class="table table-centered table-striped table-nowrap mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Permission</th>
                                <th>Group</th>
                                <th>Used By Roles</th>
                                <th class="text-end"></th>
                            </tr>
                            </thead>

                            <tbody>
                            @forelse($permissions as $permission)
                                <tr>
                                    <td>
                                        <strong>{{ $permission->label }}</strong>
                                        <div class="text-muted small">
                                            {{ $permission->name }}
                                        </div>
                                    </td>

                                    <td>
                                        <span class="badge bg-soft-secondary text-dark">
                                            {{ $permission->group }}
                                        </span>
                                    </td>

                                    <td>
                                        <span class="badge bg-soft-info text-info">
                                            {{ $permission->roles_count }}
                                        </span>
                                    </td>

                                    <td class="text-end">
                                        <a href="{{ route('admin.permissions.edit', $permission) }}"
                                           class="text-primary"
                                           title="Edit">
                                            <i class="mdi mdi-pencil"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4"
                                        class="text-center text-muted py-4">
                                        No permissions found.
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        {{ $permissions->links() }}
                    </div>
                </div>
            </div>
        </div>

        {{-- SIDEBAR --}}
        <div class="col-12 col-md-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">About Permissions</h4>
                    <hr>

                    <p class="text-muted small mb-0">
                        Permissions are low-level access controls.
                        They should be stable and carefully reviewed
                        before modification.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>