<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorate="~{template}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<title>Camp Organizer 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<th:block layout:fragment="content">
		<div class="mainpage">
			<h1 class="centered cabin">Anmeldung</h1>
			<h3 class="centered cabin" th:text="'zur ' + ${camp.name} + ' ' + ${camp.year}"></h3>
			<div class="alert alert-warning" style="margin: auto; max-width: 450px" th:unless="${camp.bookingHasStarted}">
				Die Anmeldung wird erst am <span th:text="${#temporals.format(camp.startBooking, 'dd.MM.yyyy')}"></span> freigeschaltet.
			</div>
			<div class="card centered-card lindaborders" style="max-width: 48rem" th:if="${camp.bookingHasStarted}">
				<div class="card-body">
					<h1 class="centered cabin">Teilnehmeranmeldung</h1>
					<form th:action="@{/registration/register}" th:object="${bean}" method="post">
						<span class="error"	th:each="error : ${#fields.errors('fkCamp')}">[[${error}]]</span>
						<input type="hidden" th:field="*{fkCamp}" />
						<div class="container">
							<div class="row">
								<div class="col-sm-12 rowdist" th:if="${wellknown}">
									<div class="dropdown">
										<button class="btn btn-outline-secondary dropdown-toggle form-control" type="button" data-bs-toggle="dropdown" aria-expanded="false">
											aus bisherigen Anmeldungen vorbefüllen
										</button>
										<ul class="dropdown-menu">
											<li th:each="w : ${wellknown}"><a class="dropdown-item" href="#" th:attr="onclick=|useexisting('${w.json}')|"><span
														th:text="${w.option}"></span></a></li>
										</ul>
									</div>							</div>
								<div class="col-sm-6 rowdist">
									<div>Vorname</div>
									<input type="text" th:field="*{forename}" th:class="${'form-control ' + (#fields.hasErrors('forename') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('forename')}">[[${error}]]</span>
								</div>
								<div class="col-sm-6 rowdist">
									<div>Nachname</div>
									<input type="text" th:field="*{surname}" th:class="${'form-control ' + (#fields.hasErrors('surname') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('surname')}">[[${error}]]</span>
								</div>
								<div class="col-sm-6 rowdist">
									<div>Straße und Hausnummer</div>
									<input type="text" th:field="*{street}" th:class="${'form-control ' + (#fields.hasErrors('street') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('street')}">[[${error}]]</span>
								</div>
								<div class="col-sm-2 rowdist">
									<div>PLZ</div>
									<input type="text" th:field="*{zip}" th:class="${'form-control ' + (#fields.hasErrors('zip') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('zip')}">[[${error}]]</span>
								</div>
								<div class="col-sm-4 rowdist">
									<div>Ort</div>
									<input type="text" th:field="*{city}" th:class="${'form-control ' + (#fields.hasErrors('city') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('city')}">[[${error}]]</span>
								</div>
								<div class="col-sm-6 rowdist">
									<div>E-Mail</div>
									<input type="text" th:field="*{email}" th:class="${'form-control ' + (#fields.hasErrors('email') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('email')}">[[${error}]]</span>
								</div>
								<div class="col-sm-6 rowdist">
									<div>Telefonnummer</div>
									<input type="text" th:field="*{phone}" th:class="${'form-control' + (#fields.hasErrors('phone') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('phone')}">[[${error}]]</span>
								</div>
								<div class="col-sm-4 rowdist">
									<div>mitkommen als</div>
									<select th:field="*{campRole}" th:class="${'form-select' + (#fields.hasErrors('campRole') ? 'inputerror' : '')}">
										<option th:each="o : ${roles}" th:value="${o.key}" th:text="${o.value}"></option>
									</select>
									<span class="error"	th:each="error : ${#fields.errors('campRole')}">[[${error}]]</span>
								</div>
								<div class="col-sm-4 rowdist">
									<div>Geschlecht</div>
									<select th:field="*{sex}" th:class="${'form-select ' + (#fields.hasErrors('sex') ? 'inputerror' : '')}">
										<option value="">-- wählen --</option>
										<option th:each="o : ${sexes}" th:value="${o.key}" th:text="${o.value}"></option>
									</select>
									<span class="error"	th:each="error : ${#fields.errors('sex')}">[[${error}]]</span>
								</div>
								<div class="col-sm-4 rowdist">
									<div>Geburtsdatum</div>
									<input type="date" th:field="*{birthDate}" th:class="${'form-control ' + (#fields.hasErrors('birthDate') ? 'inputerror' : '')}" onfocus="this.type = 'date'" onblur="this.type = 'text'" />
									<span class="error"	th:each="error : ${#fields.errors('birthDate')}">[[${error}]]</span>
								</div>
								<div class="col-sm-12 rowdist">
									<div>Sonstiges</div>
									<textarea class="form-control" th:field="*{comment}"></textarea>
								</div>
							</div>
							<div class="row" th:if="${#strings.isEmpty(currentUser)}">
								<div class="col-sm-6 rowdist">
									<div class="form-check" title="Die Anmeldedaten können in den Kontoeinstellungen bearbeitet und für die nächsten Freizeitanmeldungen verwendet werden.">
										<input id="save" type="checkbox" class="form-check-input" th:field="*{registerInKeycloak}" onchange="$('#createlogin').toggle();" /> <label class="form-check-label" for="save">Registrieren</label>
									</div>
								</div>
								<div class="col-sm-6 rowdist">
									<a th:href="@{/userlogin/registration/{id}(id=${bean.fkCamp})}">oder einloggen</a>
								</div>
							</div>
							<div id="createlogin" class="row" th:if="${#strings.isEmpty(currentUser)}">
								<h1 class="centered cabin">Profildaten anlegen</h1>
								<div class="col-sm-6 rowdist">
									<div>Nutzername</div>
									<input type="text" th:field="*{login}" th:class="${'form-control ' + (#fields.hasErrors('login') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('login')}">[[${error}]]</span>
								</div>
								<div class="col-sm-6 rowdist">
									<div>Passwort</div>
									<input type="password" th:field="*{password}" th:class="${'form-control ' + (#fields.hasErrors('password') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('password')}">[[${error}]]</span>
								</div>
								<div class="col-sm-6 rowdist">
									<div>Vorname</div>
									<input type="text" th:field="*{kcForename}" th:class="${'form-control ' + (#fields.hasErrors('kcForename') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('kcForename')}">[[${error}]]</span>
								</div>
								<div class="col-sm-6 rowdist">
									<div>Nachname</div>
									<input type="text" th:field="*{kcSurname}" th:class="${'form-control ' + (#fields.hasErrors('kcSurname') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('kcSurname')}">[[${error}]]</span>
								</div>
								<div class="col-sm-12 rowdist">
									<div>E-Mail</div>
									<input type="text" th:field="*{kcEmail}" th:class="${'form-control ' + (#fields.hasErrors('kcEmail') ? 'inputerror' : '')}" />
									<span class="error"	th:each="error : ${#fields.errors('kcEmail')}">[[${error}]]</span>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12 rowdist centered">
									<input type="submit" class="btn btn-linda buttonfont" value="jetzt anmelden" />
								</div>
							</div>
						</div>
					</form>
					<script type="text/javascript">
						function useexisting(o) {
							j = JSON.parse(o);
							$("#forename").val(j.forename);
							$("#surname").val(j.surname);
							$("#street").val(j.street);
							$("#zip").val(j.zip);
							$("#city").val(j.city);
							$("#phone").val(j.phone);
							$("#email").val(j.email);
							$("#sex").val(j.sex);
							$("#birthDate").val(j.birthDate);
						}
					</script>
				</div>
			</div>
		</div>
	</th:block>
</body>
</html>
