{% load static %}
<script src="{% static 'authentication/js/register.js' %}"></script>

<!-- Register Modal -->
<script id="registerFormHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="registerModalLabel">Register</h5>
            <button type="button" class="btn-close toDisable" data-bs-dismiss="modal" aria-label="Close" id="registerModalCloseButton"></button>
        </div>
        <div class="modal-body text-center">
            <form id="registerForm" onsubmit="register(event);" class="row g-3">
                <div class="col-md-6">
                    <label for="registerFirstName" class="form-label"><span class="requirement">*</span>First Name</label>
                    <input type="text" class="form-control toDisable" id="registerFirstName" placeholder="First Name">
                </div>
                <div class="col-md-6">
                    <label for="registerLastName" class="form-label"><span class="requirement">*</span>Last Name</label>
                    <input type="text" class="form-control toDisable" id="registerLastName" placeholder="Last Name">
                </div>
                <div class="col-md-6">
                    <label for="registerEmail" class="form-label"><span class="requirement">*</span>Email Address</label>
                    <input type="email" class="form-control toDisable" id="registerEmail" placeholder="abc@example.com">
                </div>
                <div class="col-md-6">
                    <label for="registerUsername" class="form-label"><span class="requirement">*</span>Username</label>
                    <input type="text" class="form-control toDisable" id="registerUsername" aria-describedby="usernameHelp" placeholder="username">
                    <div id="usernameHelp" class="form-text">6 to 20 alpha-numeric characters only</div>
                </div>
                <div class="col-md-6">
                    <label for="registerPassword" class="form-label"><span class="requirement">*</span>Password</label>
                    <input type="password" class="form-control toDisable" id="registerPassword" aria-describedby="passwordHelp" placeholder="**********">
                    <div id="passwordHelp" class="form-text">8 to 20 characters long</div>
                </div>
                <div class="col-md-6">
                    <label for="registerConfirmPassword" class="form-label"><span class="requirement">*</span>Confirm Password</label>
                    <input type="password" class="form-control toDisable" id="registerConfirmPassword" aria-describedby="password1Help" placeholder="**********">
                    <div id="password1Help" class="form-text">include an alphabet, a number, and a special character</div>
                </div>
            </form>
            <div class="errormessage" id="registerError"></div>
        </div>
        <div class="modal-footer">
            <div class="btn-group me-auto btn-group-sm w-25" role="group" aria-label="First group">
                <button type="button" class="btn btn-transparent-dark w-100 toDisable" onclick="displayRecoverModal(event);">Recover</button>
            </div>
            <div class="btn-group my-auto btn-group-sm w-25" role="group" aria-label="Second group">
                <button type="button" class="btn btn-transparent-dark w-100 toDisable" data-bs-dismiss="modal" id="registerModalCloseButton">Close</button>
            </div>
            <div class="btn-group ms-auto btn-group-sm w-25" role="group" aria-label="Third group">
                <button type="submit" form="registerForm" class="btn btn-transparent-dark toDisable w-100">
                    Continue
                    <span class="spinner-border spinner-border-sm text-dark" role="status" aria-hidden="true" hidden></span>
                </button>
            </div>
        </div>
        </div>
    </div>
    {% endverbatim %}
</script>

<!-- Register verification Modal -->
<script id="registerVerificationFormHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="registerVerificationModalLabel">Verify</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" disabled id="registerVerificationModalCloseButton"></button>
        </div>
        <div class="modal-body text-center">
            <h6>Verify - {{email}}</h6>
            <form id="registerVerifyForm" onsubmit="registerVerify(event);">
                <div class="mb-1">
                    <label for="registerVerifyCode" class="form-label"><span class="requirement">*</span>Verification Code</label>
                    <input type="text" class="form-control toDisable" id="registerVerifyCode" placeholder="123456" aria-describedby="registerVerifyHelp">
                    <div id="registerVerifyHelp" class="form-text">Check your Inbox/Spam folder for a Verification Code</div>
                </div>
            </form>
            <a href="" class="toDisableAnchorTag link-dark" onclick="registerVerifyCodeResend(event);">Resend Verification Code</a>
            <div class="errormessage" id="registerVerifyError"></div>
        </div>
        <div class="modal-footer">
            <div class="btn-group me-auto btn-group-sm w-25" role="group" aria-label="First group">
                <button type="button" class="btn btn-transparent-dark w-100 toDisable" data-bs-dismiss="modal" onclick="cancelRegisterVerify();">Cancel</button>
            </div>
            <div class="btn-group ms-auto btn-group-sm w-25" role="group" aria-label="Third group">
                <button type="submit" form="registerVerifyForm" class="btn btn-transparent-dark toDisable w-100">
                    Verify
                    <span class="spinner-border spinner-border-sm text-dark" role="status" aria-hidden="true" hidden></span>
                </button>
            </div>
        </div>
        </div>
    </div>
    {% endverbatim %}
</script>


<!-- Register Unsuccessful Modal -->
<script id="registerUnsuccessfulModalHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="registerUnsuccessModalLabel">Oops!!!</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center">{{message}}</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-transparent-dark btn-sm" data-bs-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
    {% endverbatim %}
</script>
