{{#extend "my-account-v2"
    title="Change password"
    dataBreadcrumbs=change_password.breadcrumbs
    pageClass="page_my-account_new"
    pageMyAcc=true
    myAccV2=true
    isLoggedIn=true
    mainClass="change-password"
}}
{{#content "head" mode="append"}}
    <link type="text/css" rel="stylesheet" href="./css/pages/page_change-password.css">
{{/content}}
{{#content "main"}}
    <div class="globalMessages">
        <div class="container">

        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                {{> my-account/mobile-nav
                    mod
                    menu=my_account.diy.menu
                    active-index=2
                    page-name="Personal Details"
                }}
                <form action="#" class="change-password__form">
                    <div class="change-password__header">
                        <h3 class="title">Change Password</h3>
                        <div class="warning-required">Required Field</div>
                    </div>
                    {{#each change_password.fields}}
                        {{> form-row
                            type=this.type
                            id=this.id
                            label=this.label
                            value=this.value
                            placeholder=this.placeholder
                            input-mod=this.modificator
                            required=this.required
                            showContent=this.showPassword
                        }}
                    {{/each}}
                    <div class="change-password__ctas">
                        <button class="btn btn-primary btn_full btn--save" type="submit" data-action="save-form">
                            <span class="btn__text">Save changes</span>
                        </button>
                        <a href="page_my-account_change-password.html" class="btn btn-outline-primary btn_full btn--cancel" data-action="cancel-form">
                            <span class="btn__text">Cancel</span>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
{{/content}}
{{#content "foot" mode="append"}}
    {{> leave-modal
        change_password.leave-popup
        id="leave-popup"
    }}
    <script src="./js/pstrength.min.js"></script>
    <script src="./js/change-password.min.js"></script>
    <script src="./js/toggle-password-visibility.min.js"></script>
{{/content}}
{{/extend}}