<div>
    <!-- ko stopBinding: true -->
    <div id="change_password_div">
        <h2>Username: {{ form.username._value() }}</h2>
        <h3 class="alert-danger" data-bind="text: message"></h3>
        <div class="row">
            <div class="col-md-4">
                <form id="change_password_form" action="" method="post"
                      class="form" role="form">
                    <input id="password_length" name="password_length" type="hidden"
                           value="{{ form.password_length._value() }}">
                    <input id="username" name="username" type="hidden" value="{{ form.username._value() }}">
                    <input id="changing" name="changing" type="hidden" value="{{ form.changing._value() }}">
                    {% if form.csrf_token %}
                        <input id="csrf_token" name="csrf_token" type="hidden"
                               value="{{ form.csrf_token._value() }}">
                    {% endif %}
                    {% if form.changing._value() == 'True' %}
                        <div class="form-group"><label data-bind="click: clickToggleShowPassword" class="control-label"
                                                       for="old_password">Current Password <span
                                data-bind="visible: showHidePassword"
                                title="show/hide password">&#128065;</span></label>
                            <input class="form-control" data-bind="textInput: old_password" id="old_password"
                                   name="old_password"
                                   required type="password" value="">
                        </div>
                    {% endif %}
                    <div class="form-group  required"><label data-bind="click: clickToggleShowPassword"
                                                             class="control-label" for="password">New Password <span
                            class="alert-danger" title="{{ rules_text }}">?</span> <span
                            data-bind="visible: showHidePassword" title="show/hide password">&#128065;</span></label>
                        <input class="form-control" data-bind="textInput: password1" id="password" name="password"
                               required
                               type="password" value="">
                    </div>

                    <div class="form-group  required"><label class="control-label" for="password2">Repeat New
                        Password</label>
                        <input class="form-control" data-bind="textInput: password2" id="password2" name="password2"
                               required
                               type="password" value="">
                    </div>

                    <input class="btn btn-default" data-bind="visible: verified()" id="submit" name="submit"
                           type="submit"
                           value="{{ submit_text or 'Submit' }}">
                </form>
            </div>
        </div>
        <script src="https://unpkg.com/tko/dist/tko.es6.min.js"></script>
        <script src="{{ url_for('route_change_password_static', filename='pageChangePassword.js') }}"></script>
    </div>
    <!-- /ko -->
</div>