<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">{{ __('Update Password') }}</h3>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ __('Ensure your account is using a long, random password to stay secure.') }}</p>
        </div>
    </div>

    <div class="mt-5 md:mt-0 md:col-span-2">
        <form wire:submit="updatePassword">
            <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">
                    <div class="col-span-6 sm:col-span-4">
                        <x-aura::label for="current_password" value="{{ __('Current Password') }}" />
                        <x-aura::text-input id="current_password" type="password" class="mt-1 block w-full" wire:model="state.current_password" autocomplete="current-password" />
                        <x-aura::input-error :messages="$errors->get('current_password')" class="mt-2" />
                    </div>

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

                    <div class="col-span-6 sm:col-span-4">
                        <x-aura::label for="password_confirmation" value="{{ __('Confirm Password') }}" />
                        <x-aura::text-input id="password_confirmation" type="password" class="mt-1 block w-full" wire:model="state.password_confirmation" autocomplete="new-password" />
                        <x-aura::input-error :messages="$errors->get('password_confirmation')" 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>
                    {{ __('Save') }}
                </x-aura::primary-button>
            </div>
        </form>
    </div>
</div>
