@php
    $user = auth()->user();
    $fmt = app(\App\Services\Formatter::class);
@endphp

<div class="mx-auto max-w-3xl">
    <x-ui.page-header title="My profile" :subtitle="$user->roleLabel()" />

    <div class="grid gap-4">
        <x-ui.card title="Details">
            <form wire:submit="saveProfile" class="space-y-3">
                <div class="flex items-center gap-4">
                    <x-ui.avatar :src="$avatar ? $avatar->temporaryUrl() : $user->avatar_url" :name="$user->name" size="16" />

                    <div class="flex-1">
                        <label class="field-label">Photo</label>
                        <input type="file" wire:model="avatar" accept="image/*" class="field-input">
                        @error('avatar') <p class="field-error">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="grid gap-3 sm:grid-cols-2">
                    <x-ui.input label="Name" wire:model="name" required :error="$errors->first('name')" />
                    <x-ui.input label="Email" type="email" wire:model="email" required :error="$errors->first('email')" />
                    <x-ui.input label="Phone" wire:model="phone" :error="$errors->first('phone')" />
                </div>

                <x-ui.button type="submit" variant="primary" loading="saveProfile">Save changes</x-ui.button>
            </form>
        </x-ui.card>

        <x-ui.card title="Password" subtitle="At least 10 characters, with letters and numbers.">
            <form wire:submit="changePassword" class="space-y-3">
                <div>
                    <label class="field-label">Current password</label>
                    <input type="password" wire:model="currentPassword" autocomplete="current-password" class="field-input">
                    @error('currentPassword') <p class="field-error">{{ $message }}</p> @enderror
                </div>

                <div class="grid gap-3 sm:grid-cols-2">
                    <div>
                        <label class="field-label">New password</label>
                        <input type="password" wire:model="password" autocomplete="new-password" class="field-input">
                        @error('password') <p class="field-error">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="field-label">Confirm new password</label>
                        <input type="password" wire:model="password_confirmation" autocomplete="new-password" class="field-input">
                    </div>
                </div>

                <x-ui.button type="submit" variant="primary" loading="changePassword">Change password</x-ui.button>
            </form>
        </x-ui.card>

        <x-ui.card title="Session">
            <dl class="space-y-2 text-sm">
                <div class="flex justify-between gap-4">
                    <dt class="text-slate-500">Last signed in</dt>
                    <dd class="font-medium">{{ $fmt->dateTime($user->last_login_at) }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-slate-500">From</dt>
                    <dd class="tabular font-medium">{{ $user->last_login_ip ?: '—' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-slate-500">Account created</dt>
                    <dd class="font-medium">{{ $fmt->date($user->created_at) }}</dd>
                </div>
            </dl>
        </x-ui.card>
    </div>
</div>