<div class="extranet_wrap">
    <div class="extranet_outer_wrap">
        <div class="extranet_inner_wrap">
        
        {% if Message_Display %}
            <h1>{{"Change your password"|trans}}</h1>
            
            <div class="extranet_message">{{Message}}</div>
        {% endif %}
        
        {% if Change_Password_Form %}
            <h1>{{"Change your password"|trans}}</h1>
            
			{% for item in Error_Display %}
				<div class="extranet_error">{{item.Error}}</div>
			{% endfor %}
            
            <div>
                <div class="extranet_field">
                    <div class="label"><label for="extranet_password">{{"Your old password:"|trans}}</label></div>
                    <div class="password_field_with_eye">
                    	{{this.frameworkField({'type': "password", 'name': "extranet_password", 'id': "extranet_password", 'required': "true", 'class': "extranet_password"})}}
                    	
                    	<i
							id="{{Container_Id}}-current-password-reveal-hide-icon"
							class="fas fa-eye-slash eye_icon"
							onclick="zOnLoad(function() {zenarioP.revealOrHidePasswordIconOnclick('{{Container_Id}}', 'current-password-reveal-hide-icon', 'extranet_password')})"
						></i>
                    </div>
                </div>
                <div class="extranet_field extranet_field_password_message">
                    <div class="label"><label for="extranet_new_password">{{"Your new password:"|trans}}</label></div>
                    <div class="password_field_with_eye">
						{{this.frameworkField({
							'type': "password",
							'name': "extranet_new_password",
							'id': "extranet_new_password",
							'pattern': "new_password",
							'required': "true",
							'class': "extranet_password",
							oninput: "zenarioP.updatePasswordNotifier('#extranet_new_password', " ~ json_encode(Password_Requirements_Settings) ~ ", '#password_message', false, false)"
						})}}
						
						<i
							id="{{Container_Id}}-password-reveal-hide-icon"
							class="fas fa-eye-slash eye_icon"
							onclick="zOnLoad(function() {zenarioP.revealOrHidePasswordIconOnclick('{{Container_Id}}', 'password-reveal-hide-icon', 'extranet_new_password')})"
						></i>
					</div>
                	<div>
						<span id="password_message" class="title_orange">{{'Please enter a password.'|trans}}</span>
					</div>
                </div>
                
                <div class="extranet_field">
                    <div class="label"><label for="extranet_new_password_confirm">{{"Repeat your new password:"|trans}}</label></div>
                    <div class="password_field_with_eye">
                    	{{this.frameworkField({'type': "password", 'name': "extranet_new_password_confirm", 'id': "extranet_new_password_confirm", 'required': "true", 'class': "extranet_password"})}}
                    	
                    	<i
							id="{{Container_Id}}-repeat-password-reveal-hide-icon"
							class="fas fa-eye-slash eye_icon"
							onclick="zOnLoad(function() {zenarioP.revealOrHidePasswordIconOnclick('{{Container_Id}}', 'repeat-password-reveal-hide-icon', 'extranet_new_password_confirm')})"
						></i>
                    </div>
                </div>
                <div class="extranet_btn"><input type="submit" name="extranet_change_password" class="extranet_submit" value="{{'Change password'|trans}}" /></div>
            </div>
        {% endif %}
        
        {% if Logged_In %}
            <div class="extranet_links">
                {% if Logout_Link_Section %}
                    <div>
                        <a {{Logout_Link}}>{{"Logout"|trans}}</a>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        </div>
    </div>
</div>
