{{--
    brafa Systems — Roles.
    Livewire backing: App\Http\Livewire\LaravelExamples\Roles\Index.
    Bindings preserved: wire:model perPage/search, wire:click sortBy/destroy,
    @can policies, status/error flashes, $roles pagination, route(new-role/edit-role).
--}}
<div class="brafa-screen">
    @if (Session::has('status'))
        <div class="status-banner status-banner--success">{{ Session::get('status') }}</div>
    @elseif (Session::has('error'))
        <div class="status-banner status-banner--danger">{{ Session::get('error') }}</div>
    @endif

    <div class="card prop-list">
        <div class="prop-toolbar">
            <div class="prop-toolbar__search">
                <x-lucide name="search" size="16" />
                <input wire:model.debounce.300ms="search" type="text" class="input" placeholder="Search roles…">
            </div>
            <div class="prop-toolbar__right">
                <label class="prop-toolbar__perpage">
                    <span class="eyebrow">Show</span>
                    <select wire:model="perPage" class="select">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                    </select>
                    <span class="eyebrow">entries</span>
                </label>
                @can('create', App\Models\Item::class)
                    <a class="btn btn--sm" href="{{ route('new-role') }}">
                        <x-lucide name="plus" size="14" /> Add role
                    </a>
                @endcan
            </div>
        </div>

        <div style="overflow-x:auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th wire:click="sortBy('id')" style="cursor:pointer;">ID</th>
                        <th wire:click="sortBy('name')" style="cursor:pointer;">Name</th>
                        <th wire:click="sortBy('description')" style="cursor:pointer;">Description</th>
                        <th wire:click="sortBy('created_at')" style="cursor:pointer;">Created</th>
                        @can('manage-users', App\User::class)
                            <th style="width: 90px;">Actions</th>
                        @endcan
                    </tr>
                </thead>
                <tbody>
                    @forelse ($roles as $role)
                        <tr wire:key="row-{{ $role->id }}">
                            <td class="mono muted">{{ $role->id }}</td>
                            <td><span class="pill pill--ink">{{ $role->name }}</span></td>
                            <td class="muted">{{ $role->description }}</td>
                            <td class="mono muted">{{ $role->created_at }}</td>
                            @can('manage-users', auth()->user())
                                <td>
                                    <div class="hstack" style="gap:6px;">
                                        @can('update', $role)
                                            <a class="row-chevron" href="{{ route('edit-role', $role) }}" title="Edit">
                                                <x-lucide name="edit-3" size="16" />
                                            </a>
                                        @endcan
                                        @can('delete', $role)
                                            <button type="button" class="row-chevron" title="Delete"
                                                    onclick="confirm('Are you sure you want to delete this role?') || event.stopImmediatePropagation()"
                                                    wire:click="destroy({{ $role->id }})">
                                                <x-lucide name="trash-2" size="16" />
                                            </button>
                                        @endcan
                                    </div>
                                </td>
                            @endcan
                        </tr>
                    @empty
                        <tr><td colspan="5" style="padding:48px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No roles found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="prop-list__footer">
            <div>
                @if ($roles->total() > 0)
                    Showing <strong style="color:var(--fg);">{{ $roles->firstItem() }}–{{ $roles->lastItem() }}</strong>
                    of <strong style="color:var(--fg);">{{ $roles->total() }}</strong>
                @else
                    No entries
                @endif
            </div>
            <div>{{ $roles->links('vendor.pagination.brafa') }}</div>
        </div>
    </div>
</div>
@push('js')
    <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
@endpush