<!-- recover modal -->
<script id="recoverModalHandlebars" type="text/x-handlebars-template">
    <div class="modal fade" id="recoverModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="recoverModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="recoverModalLabel">Recover</h5>
                    <button type="button" class="btn-close disableButton" data-bs-dismiss="modal" aria-label="Close" id="recoverModalCloseButton"></button>
                </div>
                <div class="modal-body text-center">
                    <form id="recoverForm" onsubmit="recover(event);">
                        <div>
                            <label for="recoverFormInputText" class="form-label"><span class="requirement">*</span>Email Address / Username</label>
                            <input type="text" class="form-control disableButton" id="recoverFormInputText" placeholder="email address or username">
                        </div>
                    </form>
                    <div class="errormessage mt-2 mb-0" id="recoverError"><br></div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group w-100" role="group">
                        <button type="button" onclick="displayRegisterModal(event);" class="btn btn-outline-dark btn-sm me-auto w-25 disableButton">Register</button>
                        <button type="button" class="btn btn-outline-dark btn-sm mx-auto w-25 disableButton" data-bs-dismiss="modal">Close</button>
                        <button type="submit" form="recoverForm" class="btn btn-outline-dark btn-sm ms-auto w-25 disableButton">
                            <span class="spinner-border spinner-border-sm text-dark" role="status" aria-hidden="true" hidden></span>
                            Continue
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>


<!-- verify recovery email modal -->
<script id="verifyRecoveryEmailModalHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="modal fade" id="recoveryEmailVerificationModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="verifyRecoveryEmailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="verifyRecoveryEmailModalLabel">Verify Email Address</h5>
                    <button type="button" class="btn-close" disabled data-bs-dismiss="modal" aria-label="Close" id="closeBtn_VerifyRecoveryModal"></button>
                </div>
                <div class="modal-body text-center">
                    <h5>{{email}}</h5>
                    <h6>Your code is valid for: <span id="recover_countdown"></span></h6>
                    <form id="verifyRecoveryEmailForm" onsubmit="verifyRecoveryEmail(event);">
                        <div>
                            <label for="verifyRecoveryEmailCodeInput" class="form-label"><span class="requirement">*</span>Verification Code</label>
                            <input type="text" class="form-control disableButton" id="verifyRecoveryEmailCodeInput" placeholder="123456" aria-describedby="verifyRecoveryEmailHelp">
                            <div id="verifyRecoveryEmailHelp" class="form-text">Check your Inbox / Spam folder for a verification code.</div>
                        </div>
                    </form>
                    <a href="" class="link-danger-dark disableAnchorTag" onclick="resendVerificationCode_recover(event);">Resend Verification Code</a>
                    <div class="errormessage mt-2 mb-0" id="verifyRecoveryError"><br></div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group w-100" role="group">
                        <button type="button" onclick="cancelRecovery();" class="btn btn-outline-dark btn-sm me-auto w-25 disableButton" data-bs-dismiss="modal" id="cancelRecoveryBtn">Cancel</button>
                        <button type="submit" form="verifyRecoveryEmailForm" class="btn btn-outline-dark btn-sm ms-auto w-25 disableButton">
                            <span class="spinner-border spinner-border-sm text-dark" role="status" aria-hidden="true" hidden></span>
                            Verify
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endverbatim %}
</script>


<!-- password change modal -->
<script id="changePasswordHandlebars" type="text/x-handlebars-template">
    <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-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="changePasswordModalLabel">Change Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" disabled aria-label="Close" id="changePasswordModalCloseButton"></button>
                </div>
                <div class="modal-body text-center">
                    <form id="changePasswordForm" onsubmit="changepassword(event);">
                        <div class="mb-1">
                            <label for="recoverChangePassword" class="form-label"><span class="requirement">*</span>Password</label>
                            <input type="password" class="form-control toDisable" id="recoverChangePassword" aria-describedby="changePasswordHelp">
                            <div id="changePasswordHelp" class="form-text">8 to 20 characters long</div>
                        </div>
                        <div class="mb-1">
                            <label for="recoverChangePassword1" class="form-label"><span class="requirement">*</span>Confirm Password</label>
                            <input type="password" class="form-control toDisable" id="recoverChangePassword1" aria-describedby="changePasswordHelp1">
                            <div id="changePasswordHelp1" class="form-text">must include an alphabet, a number, and a special character</div>
                        </div>
                    </form>
                    <div class="errormessage" id="changePasswordError"></div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group w-100" role="group">
                        <button type="button" class="btn btn-outline-dark btn-sm me-auto w-25 disableButton" data-bs-dismiss="modal" onclick="cancelRecovery();">Cancel</button>
                        <button type="submit" form="changePasswordForm" class="btn btn-outline-dark btn-sm ms-auto w-25 disableButton">
                            <span class="spinner-border spinner-border-sm text-dark" role="status" aria-hidden="true" hidden></span>
                            Update
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>