<div class="user-list">
    <x-title>
        Users

        @can('users.create')
            <x-slot:buttons>
                <a wire:navigate href="{{ route('admin.users.create') }}"
                   class="btn btn-success waves-effect waves-light">
                    <i class="mdi mdi-plus me-2"></i>
                    Add User
                </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">
                            <label class="form-label">Role</label>
                            <select class="form-select" wire:model.live="role">
                                <option value="">Any</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->name }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                        </div>

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

                    {{-- TABLE --}}
                    <div class="table-responsive">
                        <table class="table table-centered table-striped table-nowrap mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>User</th>
                                <th>Roles</th>
                                <th class="text-end"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($users as $user)
                                <tr>
                                    <td>
                                        <strong>
                                            {{ $user->name_first }} {{ $user->name_last }}
                                        </strong>
                                        <div class="text-muted small">
                                            {{ $user->email }}
                                        </div>
                                    </td>

                                    <td>
                                        @foreach($user->roles as $role)
                                            <span class="badge bg-soft-primary text-primary">
                                                {{ $role->name }}
                                            </span>
                                        @endforeach
                                    </td>

                                    <td class="text-end">
                                        @can('view', $user)
                                            <a wire:navigate href="{{ route('admin.users.show', $user) }}"
                                               class="text-secondary me-2"
                                               title="Profile">
                                                <i class="mdi mdi-account-box"></i>
                                            </a>
                                        @endcan
                                        @can('edit', $user)
                                            <a wire:navigate href="{{ route('admin.users.edit', $user) }}"
                                               class="text-primary me-2"
                                               title="Edit">
                                                <i class="mdi mdi-pencil"></i>
                                            </a>
                                        @endcan
                                        @can('delete', $user)
                                            <button type="button"
                                                    class="btn btn-link p-0 text-danger align-baseline"
                                                    title="Delete"
                                                    wire:click="delete({{ $user->id }})"
                                                    wire:confirm="Delete {{ $user->name_first }} {{ $user->name_last }}? This user will lose all access immediately.">
                                                <i class="mdi mdi-delete"></i>
                                            </button>
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3"
                                        class="text-center text-muted py-4">
                                        No users found.
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        {{ $users->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 Users</h4>
                    <hr>

                    <p class="text-muted small mb-0">
                        Users are assigned roles. Roles determine
                        permissions implicitly.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
