<div>

    <x-jetstream.form-section submit="updatePassword">
        <x-slot name="title">
            {{ __('Update Password') }}
        </x-slot>

        <x-slot name="description">
            {{ __('Ensure your profile is using a long, random password to stay secure.') }}
        </x-slot>

        <x-slot name="form">
            <div class="col-span-6 sm:col-span-4" x-data="{ showPassword: false }">
                <x-jetstream.label for="current_password" value="{{ __('Current Password') }}" />
                <div class="relative">
                    <x-jetstream.input id="current_password" ::type="showPassword ? 'text' : 'password'" class="mt-1 block w-full pr-10" wire:model="state.current_password" autocomplete="current-password" />
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
                        <button type="button" @click="showPassword = !showPassword" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
                            <template x-if="!showPassword">
                                <x-icon name="eye" class="h-5 w-5" />
                            </template>
                            <template x-if="showPassword">
                                <x-icon name="eye-slash" class="h-5 w-5" />
                            </template>
                        </button>
                    </div>
                </div>
                <x-jetstream.input-error for="state.current_password" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4" x-data="{ showPassword: false }">
                <x-jetstream.label for="password" value="{{ __('New Password') }}" />
                <div class="relative">
                    <x-jetstream.input id="password" ::type="showPassword ? 'text' : 'password'" class="mt-1 block w-full pr-10" wire:model="state.password" autocomplete="new-password" />
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
                        <button type="button" @click="showPassword = !showPassword" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
                            <template x-if="!showPassword">
                                <x-icon name="eye" class="h-5 w-5" />
                            </template>
                            <template x-if="showPassword">
                                <x-icon name="eye-slash" class="h-5 w-5" />
                            </template>
                        </button>
                    </div>
                </div>
                <x-jetstream.input-error for="state.password" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4" x-data="{ showPassword: false }">
                <x-jetstream.label for="password_confirmation" value="{{ __('Confirm Password') }}" />
                <div class="relative">
                    <x-jetstream.input id="password_confirmation" ::type="showPassword ? 'text' : 'password'" class="mt-1 block w-full pr-10" wire:model="state.password_confirmation" autocomplete="new-password" />
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
                        <button type="button" @click="showPassword = !showPassword" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
                            <template x-if="!showPassword">
                                <x-icon name="eye" class="h-5 w-5" />
                            </template>
                            <template x-if="showPassword">
                                <x-icon name="eye-slash" class="h-5 w-5" />
                            </template>
                        </button>
                    </div>
                </div>
                <x-jetstream.input-error for="state.password_confirmation" class="mt-2" />
            </div>
        </x-slot>

        <x-slot name="actions">
            <x-jetstream.action-message class="mr-3" on="saved">
                {{ __('Saved') }}
            </x-jetstream.action-message>

            <x-jetstream.button>
                {{ __('Save') }}
            </x-jetstream.button>
        </x-slot>
    </x-jetstream.form-section>

</div>
