@php($editing = $user->exists)
<x-layouts.app :title="$editing ? 'Edit user' : 'Add user'" :subtitle="$editing ? $user->email : 'Create a new account and assign a role.'"
               :breadcrumbs="['Administration' => null, 'Users' => route('users.index'), ($editing ? $user->name : 'New') => null]">
    <form method="POST" action="{{ $editing ? route('users.update', $user) : route('users.store') }}" class="grid gap-6 lg:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif

        <div class="space-y-6 lg:col-span-2">
            <x-card title="Personal details">
                <div class="grid gap-5 sm:grid-cols-2">
                    <x-input name="name" label="Full name" :value="$user->name" required maxlength="255" />
                    <x-input name="display_name" label="Display name" :value="$user->display_name" maxlength="255" />
                    <x-input name="email" type="email" label="Email (login)" :value="$user->email" required autocomplete="off" />
                    <x-input name="phone_no" label="Phone number" :value="$user->phone_no" inputmode="tel" />
                    <x-input name="display_mobile" label="Display mobile" :value="$user->display_mobile" inputmode="tel" />
                    <x-input name="sms_number" label="SMS number" :value="$user->sms_number" />
                </div>
            </x-card>

            <x-card title="{{ $editing ? 'Reset password' : 'Password' }}" subtitle="{{ $editing ? 'Leave blank to keep the current password.' : 'Minimum 8 characters with letters and numbers.' }}">
                <div class="grid gap-5 sm:grid-cols-2">
                    <x-input name="password" type="password" label="Password" :required="! $editing" autocomplete="new-password" />
                    <x-input name="password_confirmation" type="password" label="Confirm password" :required="! $editing" autocomplete="new-password" />
                </div>
            </x-card>
        </div>

        <div class="space-y-6">
            <x-card title="Access">
                <div class="space-y-5">
                    <x-select name="role" label="Role" :options="\App\Enums\Role::options()" :value="$user->role?->value" required />
                    <x-select name="tlr_type" label="Telecaller type" :options="$types" :value="$user->tlr_type" placeholder="— None —" />
                    <label class="flex items-start gap-3 rounded-xl border border-ink-200 p-3 dark:border-ink-700">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" class="form-checkbox mt-0.5" @checked(old('is_active', $user->is_active))>
                        <span>
                            <span class="block text-sm font-medium text-ink-900 dark:text-white">Active</span>
                            <span class="block text-xs text-ink-500">Inactive users cannot sign in to the web or mobile app.</span>
                        </span>
                    </label>
                </div>
            </x-card>

            <div class="flex gap-2">
                <button class="btn btn-brand flex-1"><x-heroicon-m-check class="h-4 w-4" /> {{ $editing ? 'Save changes' : 'Create user' }}</button>
                <a href="{{ route('users.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</x-layouts.app>