<jet-form-section @submitted="updatePassword">

    <div class="form-container form-updatepasswords">
        <!-- form components start -->
        <div class="form-components">

            <div class="form-components__title"><h3>{{ $t('Update Password') }}</h3></div>
            <div class="form-components__body">
                <div class="form-components__input-text">

                    <div class="form-components__block">
                        <div class="form-components__block-item block-text">
                            <p>{{ $t('Ensure your account is using a long, random password to stay secure.') }}</p>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.current_password}">
                            <label for="input_current">{{ $t('Current Password') }}</label>
                            <input autocomplete="new-password"  v-model="form.current_password" type="password" id="input_current">
                            <span v-if="form.errors.current_password" class="helper-text">{{ form.errors.current_password }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.password}">
                            <label for="input_new">{{ $t('New Password') }}</label>
                            <input autocomplete="new-password"  v-model="form.password" type="password" id="input_new">
                            <span v-if="form.errors.password" class="helper-text">{{ form.errors.password }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="input-field" :class="{'invalid': form.errors.password_confirmation}">
                            <label for="input_confirm">{{ $t('Confirm Password') }}</label>
                            <input autocomplete="new-password"  v-model="form.password_confirmation" type="password" id="input_confirm">
                            <span v-if="form.errors.password_confirmation" class="helper-text">{{ form.errors.password_confirmation }}</span>
                        </div>
                    </div>
                    <div class="form-components__block">
                        <div class="form-components__block-item block-button">
                            <button :disabled="form.processing" :class="{ 'opacity-75': form.processing }" class="form-components__block-button">{{ $t('Save') }}</button>
                        </div>
                    </div>

                    <div class="form-components__block">
                        <div class="form-components__block-item block-text">
                            <p>
                                <jet-action-message :on="form.recentlySuccessful" class="mr-3">
                                    {{ $t('Password was changed successfully.') }}
                                </jet-action-message>
                            </p>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!-- form components end -->
    </div>
</jet-form-section>
