<div class="description">
    <p>
        {{ __('account.settings.password.subtitle') }}
    </p>
</div>

<form method="post" action="{{ route('password.update') }}" class="settings">
    @csrf
    @method('put')

    <div class="input-row input-row--1">
        <div class="input-cell">
            <x-input.text-label :label="__('Current password')" id="current_password" name="current_password" type="password" autocomplete="current-password" />
            <x-input.error :messages="$errors->updatePassword->get('current_password')" />
        </div>
    </div>

    <div class="input-row input-row--1">
        <div class="input-cell">
            <x-input.text-label :label="__('New password')" id="new_password" name="password" type="password" autocomplete="new-password" />
            <x-input.error :messages="$errors->updatePassword->get('password')" />
        </div>
    </div>

    <div class="input-row input-row--1">
        <div class="input-cell">
            <x-input.text-label :label="__('Confirm password')" id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" />
            <x-input.error :messages="$errors->updatePassword->get('password_confirmation')" />
        </div>
    </div>

    <div class="input-row input-row--actions input-row--start">
        <x-button variant="primary">{{ __('common.save_changes') }}</x-button>
        <x-button type="anchor" variant="tertiary" href="{{ route('account.info') }}">{{ __('common.cancel') }}</x-button>

        @if (session('status') === 'password-updated')
            <p
                x-data="{ show: true }"
                x-show="show"
                x-transition
                x-init="setTimeout(() => show = false, 2000)"
                class="text-sm text-gray-600"
            >{{ __('Saved.') }}</p>
        @endif
    </div>
</form>
