<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="fragments/head :: headFragment">
        <title id="pageTitle">Registration</title>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script>
    <script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" defer="defer"
        th:if="false"></script>

</head>

<body>
    <div th:include="fragments/navbar :: navbarFragment"></div>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3 py-5">
                    <!-- <h4 class="display-4 text-center py-2">Chat</h4> -->
                    <div class="card text-white bg-primary card-form rounded mx-auto p-5" id="registration-card">

                        <div class="card-body rounded">
                            <!-- <h4 class="card-title">Chat</h4> -->
                            <!-- <div class="form-group">
									<textarea id="chatTextArea" class="form-control-lg py-2" disabled></textarea>
								</div> -->
                            <!-- <form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post"> -->
                            <!--  th:action="@{/api/chat}" -->


                            <!-- <label>First Name</label>
                            <div th:classappend="${#fields.hasErrors('firstName')} ? 'input-icon right' : ''">
                                <i th:if="${#fields.hasErrors('firstName')}" class="fa fa-exclamation tooltips" data-original-title="please enter a valid first name" data-container="body"></i>
                                <input type="text" class="form-control" maxlength="32" th:field="*{firstName}" placeholder="Between 1 and 32 characters" />
                                <span th:if="${#fields.hasErrors('firstName')}" class="help-block" th:errors="*{firstName}"></span>
                            </div> -->

                            <div class="card-text">
                                <h2 class="card-title text-center mb-3">Register</h2>
                                <form action="#" th:action="@{/perform_registration}" th:object=${userRegistrationDTO}
                                    method="POST">
                                    <div th:if="${param.error}" class="alert alert-danger">
                                        An error occured while creating your account. Please try again.
                                        <div th:if="${param.duplicate}">
                                            User with the given name already exists. Please use another name.
                                        </div>
                                        <div th:if="${param.captchaError}">
                                            Invalid captcha entered. Please try again.
                                        </div>
                                    </div>
                                    <div th:if="${param.success}" class="alert alert-success">
                                        Registration was successful. You may now login.
                                    </div>
                                    <div class="form-group">
                                        <label>Enter username: </label>
                                        <input th:classappend="${#fields.hasErrors('userName')} ? 'is-invalid' : ''" class="form-control" th:field="*{userName}" type="text" name="username" required>
                                        <small class="form-text">Username must be alphanumeric</small>
                                        <span th:if="${#fields.hasErrors('userName')}" class="help-block text-danger" th:errors="*{userName}"></span>

                                    </div>
                                    <div class="form-group">
                                        <label>Enter password: </label>
                                        <input th:classappend="${#fields.hasErrors('password')} ? 'is-invalid' : ''" class="form-control" th:field="*{password}" type="password" name="password" id="password" required>
                                        <span th:if="${#fields.hasErrors('password')}" class="help-block text-danger" th:errors="*{password}"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="password-repeat">Repeat password: </label>
                                        <input class="form-control" type="password" id="password-repeat" required>
                                    </div>
                                    <input type="hidden" th:value="${userRegistrationDTO.captchaID}" name="captchaID">
                                     <!-- <span th:text="${userRegistrationDTO.captchaText}"></span> -->
                                    <div class="form-group">
                                        <label for="captcha">Enter this captcha: 
                                           
                                            <img th:src="@{'/img/captcha/' + ${userRegistrationDTO.captchaID}}" />
                                        </label>
                                        <input class="form-control" type="text" id="captcha" th:field="*{captchaInput}" required>
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control btn btn-secondary" type="submit" value="Submit">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

</html>