<form role="form">
    <div class="panel panel-default">
        <header class="panel-heading">
            <strong class="panel-title">Change Password</strong>
        </header>

        <section class="panel-body">
            {{#if needSecure}}
                <p>Because your account is new, it is recommended that you change your password to a more secure one.</p>
            {{/if}}

            {{#unless ignoreCurrent}}
                <FwValidatedTextfield @valuePath="currentPass" @label="Current Password" @model={{this}} @type="password" @name="current_password" @placeholder="Current Password" @update={{action (mut currentPass)}} @showCount={{false}} />
            {{/unless}}

            <FwValidatedTextfield @valuePath="newPass" @label="New Password" @model={{this}} @type="password" @name="new_password" @placeholder="New Password" @update={{action (mut newPass)}} @showCount={{false}} />

            <FwValidatedTextfield @valuePath="confirmPass" @label="Confirm Password" @model={{this}} @type="password" @name="confirm_password" @placeholder="Confirm Password" @update={{action (mut confirmPass)}} @showCount={{false}} />
        </section>

        <footer class="panel-footer clearfix">
            <FwPromiseButton @type="submit" @class="btn btn-primary btn-sm pull-left" @promise={{action "confirm"}} @onsuccess={{action "success"}} @onerror={{action "error"}}>
                <i class="fa-solid fa-check"></i>
                Change Password
            </FwPromiseButton>

            <button type="button" class="btn btn-default btn-sm pull-right" {{action "closeModal"}}>
                <i class="fa-solid fa-xmark"></i>
                Close
            </button>
        </footer>
    </div>
</form>
