<div class="role-list">
    <x-title>
        Roles

        @can('roles.create')
        <x-slot:buttons>
            <a href="{{ route('admin.roles.create') }}"
               class="btn btn-success waves-effect waves-light">
                <i class="mdi mdi-plus me-2"></i>
                Add Role
            </a>
        </x-slot:buttons>
            @endcan
    </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 type="text"
                                   class="form-control"
                                   wire:model.live.debounce.300ms="search"
                                   placeholder="Search roles…">
                        </div>
                    </div>

                    {{-- TABLE --}}
                    <div class="table-responsive">
                        <table class="table table-centered table-striped table-nowrap mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Role</th>
                                <th>Permissions</th>
                                <th>Users</th>
                                <th class="text-end"></th>
                            </tr>
                            </thead>

                            <tbody>
                            @forelse($roles as $role)
                                <tr>
                                    <td>
                                        <strong>{{ $role->name }}</strong>

                                        @if($role->is_system)
                                            <span class="badge bg-soft-warning text-warning ms-2">
                                                System
                                            </span>
                                        @endif
                                    </td>

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

                                    <td>
                                        <span class="badge bg-soft-primary text-primary">
                                            {{ $role->users_count }}
                                        </span>
                                    </td>

                                    <td class="text-end">
                                        @can('view', $role)
                                        <a href="{{ route('admin.roles.show', $role) }}"
                                           class="text-secondary me-2"
                                           title="View">
                                            <i class="mdi mdi-eye"></i>
                                        </a>
                                        @endcan

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

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

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

                    <p class="text-muted small mb-0">
                        Roles group permissions together and are assigned to users.
                        System roles are protected and cannot be edited.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
