@extends('layouts.admin')

@section('title', 'Users & roles')

@section('content')
    <div class="mb-5 flex flex-wrap items-center justify-between gap-4">
        <form method="GET" class="relative">
            <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-muted" />
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search users…"
                   class="form-input w-64 pl-9" aria-label="Search users">
        </form>

        @can('users.create')
            <a href="{{ route('admin.users.create') }}" class="btn-primary">
                <x-icon name="plus" class="size-4" /> New user
            </a>
        @endcan
    </div>

    <div class="admin-card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table-admin">
                <thead>
                    <tr>
                        <th scope="col">User</th>
                        <th scope="col">Role</th>
                        <th scope="col">Status</th>
                        <th scope="col">Last sign-in</th>
                        <th scope="col"><span class="sr-only">Actions</span></th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($users as $user)
                        <tr>
                            <td>
                                <div class="flex items-center gap-3">
                                    @if ($user->avatar)
                                        <img src="{{ asset_path($user->avatar) }}" alt="" class="size-9 rounded-full object-cover">
                                    @else
                                        <span class="flex size-9 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary">
                                            {{ $user->initials() }}
                                        </span>
                                    @endif
                                    <div class="min-w-0">
                                        <p class="truncate font-medium text-text">{{ $user->name }}</p>
                                        <p class="truncate text-xs text-text-muted">{{ $user->email }}</p>
                                    </div>
                                </div>
                            </td>

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

                            <td>
                                <span @class([
                                    'pill',
                                    'bg-primary-50 text-primary' => $user->is_active,
                                    'bg-surface-muted text-text-muted' => ! $user->is_active,
                                ])>{{ $user->is_active ? 'Active' : 'Disabled' }}</span>
                            </td>

                            <td class="text-sm text-text-muted">
                                {{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
                            </td>

                            <td class="text-right">
                                <div class="flex items-center justify-end gap-1">
                                    @can('users.update')
                                        <a href="{{ route('admin.users.edit', $user) }}"
                                           class="rounded p-1.5 text-text-muted hover:bg-surface-muted hover:text-primary" title="Edit">
                                            <x-icon name="edit" class="size-4" />
                                        </a>
                                    @endcan

                                    @can('users.delete')
                                        @unless ($user->is(auth()->user()))
                                            <form action="{{ route('admin.users.destroy', $user) }}" method="POST"
                                                  onsubmit="return confirm('Delete {{ $user->name }}?')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="rounded p-1.5 text-text-muted hover:bg-error/5 hover:text-error" title="Delete">
                                                    <x-icon name="trash" class="size-4" />
                                                </button>
                                            </form>
                                        @endunless
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if ($users->hasPages())
            <div class="border-t border-border px-5 py-4">{{ $users->links() }}</div>
        @endif
    </div>
@endsection