<div class="md:grid md:grid-cols-3 md:gap-6">
    <div class="md:col-span-1 flex justify-between">
        <div class="px-4 sm:px-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('Profile Information') }}</h3>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ __('Update your account\'s profile information and email address.') }}</p>
        </div>
    </div>

    <div class="mt-5 md:mt-0 md:col-span-2">
        <form wire:submit="updateProfileInformation">
            <div class="px-4 py-5 bg-white dark:bg-gray-800 sm:p-6 shadow sm:rounded-tl-md sm:rounded-tr-md">
                <div class="grid grid-cols-6 gap-6">
                    <!-- Profile Photo -->
                    @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                        <div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4">
                            <!-- Profile Photo File Input -->
                            <input type="file" class="hidden"
                                        wire:model.live="photo"
                                        x-ref="photo"
                                        x-on:change="
                                                photoName = $refs.photo.files[0].name;
                                                const reader = new FileReader();
                                                reader.onload = (e) => {
                                                    photoPreview = e.target.result;
                                                };
                                                reader.readAsDataURL($refs.photo.files[0]);
                                        " />

                            <x-aura::label for="photo" value="{{ __('Photo') }}" />

                            <!-- Current Profile Photo -->
                            <div class="mt-2" x-show="! photoPreview">
                                <img src="{{ $this->user->profile_photo_url }}" alt="{{ $this->user->name }}" class="object-cover w-20 h-20 rounded-full">
                            </div>

                            <!-- New Profile Photo Preview -->
                            <div class="mt-2" x-show="photoPreview" nonce="{{ csp_nonce() }}" style="display: none;">
                                <span class="block w-20 h-20 bg-center bg-no-repeat bg-cover rounded-full" nonce="{{ csp_nonce() }}"
                                      x-bind:style="'background-image: url(\'' + photoPreview + '\');'">
                                </span>
                            </div>

                            <x-aura::secondary-button class="mt-2 mr-2" type="button" x-on:click.prevent="$refs.photo.click()">
                                {{ __('Select A New Photo') }}
                            </x-aura::secondary-button>

                            @if ($this->user->profile_photo_path)
                                <x-aura::secondary-button type="button" class="mt-2" wire:click="deleteProfilePhoto">
                                    {{ __('Remove Photo') }}
                                </x-aura::secondary-button>
                            @endif

                            <x-aura::input-error :messages="$errors->get('photo')" class="mt-2" />
                        </div>
                    @endif

                    <!-- Name -->
                    <div class="col-span-6 sm:col-span-4">
                        <x-aura::label for="name" value="{{ __('Name') }}" />
                        <x-aura::text-input id="name" type="text" class="block mt-1 w-full" wire:model="state.name" autocomplete="name" />
                        <x-aura::input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>

                    <!-- Email -->
                    <div class="col-span-6 sm:col-span-4">
                        <x-aura::label for="email" value="{{ __('Email') }}" />
                        <x-aura::text-input id="email" type="email" class="block mt-1 w-full" wire:model="state.email" />
                        <x-aura::input-error :messages="$errors->get('email')" class="mt-2" />
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
                <div x-data="{ shown: false, timeout: null }"
                     x-init="@this.on('saved', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
                     x-show.transition.out.opacity.duration.1500ms="shown"
                     x-transition:leave.opacity.duration.1500ms
                     style="display: none;"
                     class="text-sm text-gray-600 dark:text-gray-400 mr-3">
                    {{ __('Saved.') }}
                </div>

                <x-aura::primary-button wire:loading.attr="disabled" wire:target="photo">
                    {{ __('Save') }}
                </x-aura::primary-button>
            </div>
        </form>
    </div>
</div>
