@php
    $editing = $member->exists;
    $assignableIds ??= $roles->pluck('id')->all();
    $isSelf ??= false;
    $canManageMember ??= true;
@endphp
<x-layouts.admin :title="$editing ? $member->name : 'Add staff'">
    <p class="mb-4 text-sm"><a href="{{ route('admin.staff.index') }}" class="text-slate-500 hover:text-slate-800">← Staff</a></p>

    @unless ($canManageMember)
        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">This is a Platform Owner account. Only another Platform Owner can change it.</div>
    @endunless

    <div class="grid max-w-3xl gap-6">
        <x-ui.card title="Details">
            <form method="POST" action="{{ $editing ? route('admin.staff.update', $member) : route('admin.staff.store') }}" class="grid gap-4" novalidate>
                @csrf
                @if ($editing)
                    @method('PUT')
                @endif
                <fieldset class="grid gap-4" @disabled(! $canManageMember)>
                    <x-form.input name="name" label="Name" :value="$member->name" required />
                    <x-form.input name="email" label="Email" type="email" :value="$member->email" required />

                    @unless ($editing)
                        <div class="grid gap-4 sm:grid-cols-2">
                            <x-form.input name="password" label="Temporary password" type="password" required autocomplete="new-password" />
                            <x-form.input name="password_confirmation" label="Confirm password" type="password" required autocomplete="new-password" />
                        </div>
                    @endunless

                    <div>
                        <p class="text-sm font-medium text-slate-700">Roles</p>
                        @if ($isSelf)
                            <p class="mt-1 text-xs text-slate-500">You cannot change your own roles.</p>
                        @endif
                        <div class="mt-2 grid gap-2 sm:grid-cols-2">
                            @foreach ($roles as $role)
                                @php $locked = $isSelf || ! in_array($role->id, $assignableIds, true); @endphp
                                <label @class(['flex items-start gap-2 rounded-lg border border-slate-200 p-3 text-sm', 'opacity-60' => $locked])>
                                    <input type="checkbox" name="roles[]" value="{{ $role->id }}" class="mt-0.5 rounded border-slate-300"
                                           @checked(in_array($role->id, old('roles', $selectedRoles))) @disabled($locked)>
                                    <span>
                                        <span class="font-medium text-slate-800">{{ $role->name }}</span>
                                        <span class="block text-xs text-slate-500">{{ $role->description }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>
                        @error('roles')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div><x-ui.button>{{ $editing ? 'Save changes' : 'Add staff member' }}</x-ui.button></div>
                </fieldset>
            </form>
        </x-ui.card>

        @if ($editing && $canManageMember)
            <x-ui.card title="Reset password" description="Set a new temporary password and share it securely.">
                <form method="POST" action="{{ route('admin.staff.password', $member) }}" class="grid gap-4 sm:grid-cols-3 sm:items-end" novalidate>
                    @csrf @method('PUT')
                    <x-form.input name="password" id="reset_password" label="New password" type="password" autocomplete="new-password" />
                    <x-form.input name="password_confirmation" id="reset_password_confirmation" label="Confirm" type="password" autocomplete="new-password" />
                    <div><x-ui.button variant="secondary">Reset password</x-ui.button></div>
                </form>
            </x-ui.card>

            <x-ui.card title="Access">
                <div class="flex flex-wrap gap-3">
                    @if ($member->hasMfa())
                        <x-ui.confirm-form :action="route('admin.staff.mfa.reset', $member)" method="DELETE" label="Reset two-factor"
                                           confirm="Reset this staff member's two-factor authentication? They will need to set it up again." />
                    @endif
                    @unless ($isSelf)
                        @if ($member->isActive())
                            <x-ui.confirm-form :action="route('admin.staff.status', $member)" method="PUT" variant="danger" label="Deactivate"
                                               confirm="Deactivate this staff member? They will be signed out immediately.">
                                <input type="hidden" name="status" value="inactive">
                            </x-ui.confirm-form>
                        @else
                            <x-ui.confirm-form :action="route('admin.staff.status', $member)" method="PUT" label="Reactivate">
                                <input type="hidden" name="status" value="active">
                            </x-ui.confirm-form>
                        @endif
                    @endunless
                </div>
            </x-ui.card>
        @endif
    </div>
</x-layouts.admin>