<!-------------------------------------------------------------------------------------------------------------->
<!-- Edit Profile Modal -->
<div class="modal fade" id="editProfileModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-white text-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="editProfileModalLabel">Edit Profile</h5>
                <button type="button" class="btn-close auth-btn" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="editProfileForm-modalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark auth-btn btn-sm" data-bs-dismiss="modal" id="editProfileModalBtnClose">Close</button>
                <button type="submit" form="editProfileForm" class="btn btn-outline-dark auth-btn btn-sm">
                    Save changes
                    <span class="spinner-border spinner-border-sm auth-spinner" role="status" aria-hidden="true" hidden></span>
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Edit Profile Modal Hndlebars -->
<script id="EditProfileFormHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <form class="row g-3" id="editProfileForm" onsubmit="edit_profile(event, '{{username}}');">
        <div class="col-md-6">
            <label for="inputFirstName" class="form-label">First Name</label>
            <input type="text" class="form-control" id="inputFirstName" value="{{first_name}}">
        </div>
        <div class="col-md-6">
            <label for="inputLastName" class="form-label">Last Name</label>
            <input type="text" class="form-control" id="inputLastName" value="{{last_name}}">
        </div>
        <div class="col-md-6">
            <label for="inputUsername" class="form-label">Username</label>
            <input type="text" class="form-control" id="inputUsername" value="{{username}}">
        </div>
        <div class="col-md-6">
            <label for="inputEmail" class="form-label">Email Address</label>
            <input type="email" class="form-control" id="inputEmail" value="{{email}}" disabled>
        </div>
    </form>
    <div class="errormessage" id="edit_profile_error"><br></div>
    {% endverbatim %}
</script>
<!-------------------------------------------------------------------------------------------------------------->


<!-------------------------------------------------------------------------------------------------------------->
<!-- Confirm Password Modal -->
<div class="modal fade" id="confirmPasswordModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirmPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content  bg-white text-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmPasswordModalLabel">Confirm Password</h5>
                <button type="button" class="btn-close auth-btn" data-bs-dismiss="modal" id="confirmPasswordModalBtnClose" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="confirmPasswordForm-modalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark auth-btn btn-sm" data-bs-dismiss="modal" onclick="cancelprocesses();">Cancel</button>
                <button type="submit" form="confirmPasswordForm" class="btn btn-outline-dark auth-btn btn-sm">
                    Confirm
                    <span class="spinner-border spinner-border-sm auth-spinner" role="status" aria-hidden="true" hidden></span>
                </button>
            </div>
        </div>
    </div>
</div><!-- Confirm Password Modal Handlebars -->
<script id="confirmPasswordFormHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <form class="row g-3" id="confirmPasswordForm" onsubmit="confirmPassword(event, '{{username}}');">
        <div class="col-md-12">
            <label for="inputUsername1" class="form-label">Username</label>
            <input type="text" class="form-control form-control-sm" id="inputUsername1" value="{{username}}" disabled>
        </div>
        <div class="col-md-12">
            <label for="inputPassword" class="form-label">Password</label>
            <input type="password" class="form-control form-control-sm" id="inputPassword">
        </div>
    </form>
    <div class="errormessage" id="confirm_password_error"><br></div>
    {% endverbatim %}
</script>
<!-------------------------------------------------------------------------------------------------------------->


<!-------------------------------------------------------------------------------------------------------------->
<!-- Change Email Form Modal -->
<div class="modal fade" id="changeEmailFormModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="changeEmailFormModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content bg-white text-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="changeEmailFormModalLabel">Change Email</h5>
                <button type="button" class="btn-close auth-btn" data-bs-dismiss="modal" id="changeEmailModalBtnClose" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="changeEmailFormDiv"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark auth-btn btn-sm" data-bs-dismiss="modal" onclick="cancelprocesses();">Cancel</button>
                <button type="submit" form="changeEmailForm" class="btn btn-outline-dark auth-btn btn-sm">
                    Continue
                    <span class="spinner-border spinner-border-sm auth-spinner" role="status" aria-hidden="true" hidden></span>
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Change Email Form Modal Handlebars -->
<script id="changeEmailFormHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
        <form class="row g-3" id="changeEmailForm" onsubmit="changeEmail(event, '{{username}}');">
            <div class="col-md-12">
                <label for="inputEmail_current" class="form-label">Current Email Address</label>
                <input type="email" class="form-control form-control-sm" id="inputEmail_current" value="{{email}}" disabled>
            </div>
            <div class="col-md-12">
                <label for="inputEmail_new" class="form-label">New Email Address</label>
                <input type="email" class="form-control form-control-sm" id="inputEmail_new">
            </div>
        </form>
        <div class="errormessage" id="change_email_error"><br></div>
    {% endverbatim %}
</script>
<!-------------------------------------------------------------------------------------------------------------->


<!-------------------------------------------------------------------------------------------------------------->
<!-- Verify Password Recovery Modal -->
<div class="modal fade" id="verifyRecoveryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="verifyRecoveryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content bg-white text-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="verifyRecoveryModalLabel">Verify Your Email Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" disabled id="closeVerifyRecoveryFormBtn"></button>
            </div>
            <div class="modal-body text-center" id="verifyChangeEmailFormDiv"></div>
            <div class="modal-footer">
                <div class="btn-group w-100">
                    <button type="button" class="btn btn-sm btn-outline-dark w-25 auth-btn" onclick="cancelVerifyRecovery('{{request.user.username}}');" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" form="verifyRecoveryForm" class="btn btn-sm btn-outline-dark w-25 auth-btn">
                        Verify
                        <span class="spinner-border spinner-border-sm auth-spinner" role="status" aria-hidden="true" hidden></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Verify Password Recovery Modal Handlbars -->
<script id="verifyChangeEmailFormHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="errormessage" id="verifyRecoveryError"><br></div>
    <h6>{{new_email}}</h6>
    <form class="mb-3" id="verifyRecoveryForm" onsubmit="verifyRecovery(event, '{{username}}');">
        <div class="mb-3">
            <label for="verifyRecoveryFormCode" class="form-label"><span class="requirement">*</span>Verification Code</label>
            <input type="text" class="form-control form-control-sm" id="verifyRecoveryFormCode" placeholder="Verification Code" aria-describedby="VerifyRegisterHelp">
            <div id="VerifyRegisterHelp" class="form-text text-dark">Check your Inbox/Spam folder for the verification code.</div>
        </div>
    </form>
    <a href="" class="hover auth-link" onclick="resendVerificationCodeRecovery(event, '{{username}}');">Resend verification Code</a>
    {% endverbatim %}
</script>
<!-------------------------------------------------------------------------------------------------------------->


<!-------------------------------------------------------------------------------------------------------------->
<!-- Change Password Modal -->
<div class="modal fade" id="changePasswordModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content  bg-white text-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="changePasswordModalLabel">Change Password</h5>
                <button type="button" class="btn-close auth-btn" data-bs-dismiss="modal" id="changePasswordModalBtnClose" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="row g-3" id="changePasswordForm" onsubmit="changepassword(event, '{{request.user.username}}');">
                    <div class="col-md-12">
                        <label for="username_change_password" class="form-label"><span class="requirement">*</span>Username</label>
                        <input type="text" class="form-control form-control-sm" id="username_change_password" value="{{request.user.username}}" disabled>
                    </div>
                    <div class="col-md-12">
                        <label for="currentpassword" class="form-label"><span class="requirement">*</span>Current Password</label>
                        <input type="password" class="form-control form-control-sm" id="currentpassword" placeholder="Current Password">
                    </div>
                    <div class="col-md-12">
                        <label for="newpassword1" class="form-label"><span class="requirement">*</span>New Password</label>
                        <input type="password" class="form-control form-control-sm" id="newpassword1" placeholder="New Password" aria-describedby="recoverPassword1Help">
                        <div id="recoverPassword1Help" class="form-text text-dark">Between 8 to 20 characters.</div>
                    </div>
                    <div class="col-md-12">
                        <label for="newpassword2" class="form-label"><span class="requirement">*</span>Confirm New Password</label>
                        <input type="password" class="form-control form-control-sm" id="newpassword2" placeholder="Confirm New Password" aria-describedby="recoverPassword2Help">
                        <div id="recoverPassword2Help" class="form-text text-dark">Must include an alphabet, a digit and a special character.</div>
                    </div>
                </form>
                <div class="errormessage" id="change_password_error"><br></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark auth-btn btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="changePasswordForm" class="btn btn-outline-dark auth-btn btn-sm">
                    Update
                    <span class="spinner-border spinner-border-sm auth-spinner" role="status" aria-hidden="true" hidden></span>
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Password Change Successful Modal -->
<div class="modal fade" id="pswdChngSuccessMsg" tabindex="-1" aria-labelledby="pswdChngSuccessMsgLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-white text-dark">
            <div class="modal-header">
                <h5 class="modal-title" id="pswdChngSuccessMsgLabel">Success</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                You have successfully changed your password.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-------------------------------------------------------------------------------------------------------------->