{# load formvalidation config #}
{% set aFvDataAttrNames = oViewConf.getViewThemeParam("aFvDataAttrNames") %}

{% set iPassWordLength = oViewConf.getPasswordLength() %}
{% set sPassWordLengthErrorMessage = "C4S_FORM_VALIDATION_PASSWORD_MIN_LENGTH"|translate %}
{# todo {{ script({ include: "js/validate_password.min.js", priority: 18, dynamic: __oxid_include_dynamic }) }} #}

{% block user_password_change %}
    <div class="col-12 col-md-8 c4s-account-password-change">
        <div class="card c4s-account-card">
            <div class="card-header">
                <h4 class="card-title">{{ translate({ ident: "CHANGE_PASSWORD" }) }}</h4>
            </div>
            <form id="c4s-change-password-form" action="{{ oViewConf.getSelfActionLink()|raw }}" name="changepassword" method="post" novalidate="novalidate">
                {% set aErrors = oView.getFieldValidationErrors() %}
                {{ oViewConf.getHiddenSid()|raw }}
                {{ oViewConf.getNavFormParams()|raw }}
                <input type="hidden" name="fnc" value="changePassword">
                <input type="hidden" name="cl" value="account_password">
                <input type="hidden" name="CustomError" value="user">
                <input type="hidden" id="passwordLength" value="{{ iPassWordLength }}">

                <div class="card-body">
                    <div class="row mb-3">
                        <label class="col-lg-5 col-form-label" for="c4s-password-old">{{ translate({ ident: "OLD_PASSWORD" }) }}</label>
                        <div class="col-lg-7">
                            <input type="password" id="c4s-password-old" name="password_old" class="form-control{% if aErrors.oxuser__oxpassword %} is-invalid{% endif %}"
                                   required=""
                                   {% if aFvDataAttrNames %}
                                       {{ aFvDataAttrNames.NotEmpty }}="true"
                                       {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                                       {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                                   {% endif %}
                            >
{# todo {% include "message/inputvalidation.html.twig" with {aErrors: aErrors.oxuser__oxpassword} %} #}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-lg-5 col-form-label" for="c4s-password-new">{{ translate({ ident: "NEW_PASSWORD" }) }}</label>
                        <div class="col-lg-7">
                            <input type="password" id="c4s-password-new" name="password_new" class="form-control{% if aErrors.oxuser__oxpassword %} is-invalid{% endif %}"
                                   required=""
                                   {% if aFvDataAttrNames %}
                                       {{ aFvDataAttrNames.NotEmpty }}="true"
                                       {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                                       {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                                       {{ aFvDataAttrNames.StringLength }}="true"
                                       {{ aFvDataAttrNames.StringLengthMin }}="{{ iPassWordLength }}"
                                       {{ aFvDataAttrNames.StringLengthMessage }}="{{ sPassWordLengthErrorMessage|replace({"%s": iPassWordLength}) }}"
                                   {% endif %}
                            >
{# todo {% include "message/inputvalidation.html.twig" with {aErrors: aErrors.oxuser__oxpassword} %} #}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-lg-5 col-form-label" for="c4s-password-new-confirm">{{ translate({ ident: "CONFIRM_PASSWORD" }) }}</label>
                        <div class="col-lg-7">
                            <input type="password" id="c4s-password-new-confirm" name="password_new_confirm" class="form-control{% if aErrors.oxuser__oxpassword %} is-invalid{% endif %}"
                                   required=""
                                   {% if aFvDataAttrNames %}
                                       {{ aFvDataAttrNames.NotEmpty }}="true"
                                       {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                                       {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                                       {# declarative declaration for identical check is currently not possible - use pgroammatic way to do that .. see c4s_core_validation #}
{#                                       {{ aFvDataAttrNames.Identical }}="true"#}
{#                                       {{ aFvDataAttrNames.IdenticalField }}="checkPW()"#}
{#                                       {{ aFvDataAttrNames.IdenticalMessage }}="{{ translate({ ident: "FORM_VALIDATION_PASSWORDAGAIN" }) }}"#}
                                    {% endif %}
                                   {# data-validation-matches-match="password_new" #}
                                   {# data-validation-matches-message="{{ translate({ ident: "ERROR_MESSAGE_PASSWORD_DO_NOT_MATCH" }) }}" #}
                            >
{# todo {% include "message/inputvalidation.html.twig" with {aErrors: aErrors.oxuser__oxpassword} %} #}
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end bg-transparent border-0">
                    <button type="submit" class="btn btn-primary" role="button">{{ translate({ ident: "SAVE_PASSWORD" }) }}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}