<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_settings_user_detail_content_confirm_password_modal %}
<sw-modal
    :title="$tc('sw-users-permissions.users.user-detail.passwordConfirmation.titleConfirmPasswordModal')"
    variant="small"
    @modal-close="onCloseConfirmPasswordModal"
>

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_user_detail_content_confirm_password_modal_input__confirm_password %}
    <sw-password-field
        v-model:value="confirmPassword"
        class="sw-settings-user-detail__confirm-password"
        name="sw-field--confirm-password"
        :password-toggle-able="true"
        autocomplete="current-password"
        :label="$tc('sw-users-permissions.users.user-detail.passwordConfirmation.labelConfirmPassword')"
        :placeholder="$tc('sw-users-permissions.users.user-detail.passwordConfirmation.placeholderConfirmPassword')"
        @keypress.enter="onSubmitConfirmPassword"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_user_detail_content_confirm_password_modal_footer %}
    <template #modal-footer>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_user_detail_content_confirm_password_modal_actions_cancel %}
        <sw-button
            size="small"
            @click="onCloseConfirmPasswordModal"
        >
            {{ $tc('global.default.cancel') }}
        </sw-button>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_user_detail_content_confirm_password_modal_actions_change %}
        <sw-button
            variant="primary"
            :disabled="!confirmPassword"
            size="small"
            @click="onSubmitConfirmPassword"
        >
            {{ $tc('sw-users-permissions.users.user-detail.passwordConfirmation.labelButtonConfirm') }}
        </sw-button>
        {% endblock %}
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
