<div>
    <div x-data="{edit: false}" class="border rounded-sm dark:border-zinc-600 border-stone-300 p-4">
        <div x-show="!edit" class="flex gap-4">
            <div>
                @if (!empty($avatarUpload))
                <img src="{{$avatarUpload->temporaryUrl()}}" alt="" class="size-20">
                @elseif(!empty($avatar))
                <img src="{{auth()->user()->avatarUrl()}}" alt="" class="size-20">
                @else
                <div
                    class="size-20 flex items-center justify-center mx-auto rounded-sm dark:bg-zinc-600 bg-stone-300 dark:text-white text-black">
                    <div class="text-4xl font-bold">{{auth()->user()->initials()}}</div>
                </div>
                @endif
            </div>
            <div class="flex-1 flex flex-col justify-between">
                <flux:text>{{auth()->user()->name}}</flux:text>
                @if (!empty(auth()->user()->preferred_username))
                <flux:text>{{auth()->user()->preferred_username}} <span class="italic">(preferred username)</span>
                </flux:text>
                @else
                <flux:text>No preferred username</flux:text>
                @endif
                <flux:text>{{auth()->user()->email}}</flux:text>
            </div>
        </div>
        <form x-show="edit" wire:submit="updateProfileInformation" x-on:submit="edit = false"
            class="my-6 w-full space-y-6">
            <div class="flex items-center gap-8">
                <div class="relative">
                    <label for="avatar-upload"
                        class="flex items-center justify-center absolute bg-black opacity-0 cursor-pointer hover:opacity-80 top-0 bottom-0 left-0 right-0">
                        <flux:icon.pencil class="size-12" />
                    </label>
                    @if (!empty($avatarUpload))
                    <img src="{{$avatarUpload->temporaryUrl()}}" alt="" class="size-32">
                    @elseif(!empty($avatar))
                    <img src="{{auth()->user()->avatarUrl()}}" alt="" class="size-32">
                    @else
                    <div
                        class="size-32 flex items-center justify-center mx-auto rounded-sm dark:bg-zinc-600 bg-stone-300 dark:text-white text-black">
                        <div class="text-4xl font-bold">{{auth()->user()->initials()}}</div>
                    </div>
                    @endif
                    <flux:input type="file" id="avatar-upload" wire:model="avatarUpload" class="hidden" />
                </div>
                <div class="flex-1 flex flex-col gap-4">
                    <flux:input wire:model="name" :label="__('Name')" type="text" required autofocus
                        autocomplete="name" />
                    <flux:input wire:model="preferred_username" :label="__('Preferred Username')" type="text" required
                        autofocus autocomplete="username" />
                    <flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
                    <flux:checkbox wire:model="auto_approve_apps" 
                        :label="__('Auto-approve applications I\'ve previously authorized')" 
                        :description="__('Skip confirmation screen for apps you\'ve already approved')" />
                </div>
            </div>

            <div class="flex items-center gap-4">
                <div class="flex items-center justify-end">
                    <flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
                    <flux:button variant="subtle" x-on:click="edit = false">Cancel</flux:button>
                </div>

                <x-action-message class="me-3" on="profile-updated">
                    {{ __('Saved.') }}
                </x-action-message>
            </div>
        </form>
        <div class="mt-4">
            <flux:button variant="subtle" icon="pencil" x-on:click="edit = true" inset>Edit Profile information
            </flux:button>
        </div>
    </div>
    <div x-data="{edit: false}" class="mt-4">
        <flux:button variant="primary" x-show="!edit" x-on:click="edit = true">Change Password</flux:button>
        <form wire:submit="updatePassword" class="mt-6 space-y-6" x-show="edit">
            <flux:input wire:model="current_password" :label="__('Current password')" type="password" required
                autocomplete="current-password" />
            <flux:input wire:model="password" :label="__('New password')" type="password" required
                autocomplete="new-password" />
            <flux:input wire:model="password_confirmation" :label="__('Confirm Password')" type="password" required
                autocomplete="new-password" />

            <div class="flex items-center gap-4">
                <div class="flex items-center justify-end">
                    <flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
                    <flux:button variant="subtle" x-on:click="edit = false">Cancel</flux:button>
                </div>

                <x-action-message class="me-3" on="password-updated">
                    {{ __('Saved.') }}
                </x-action-message>
            </div>
        </form>
    </div>
</div>