<!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 Confirmation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<th:block layout:fragment="content">
		<div class="accordion" id="mainacc" sec:authorize="hasRole('registrator')">
			<div class="accordion-item">
				<h2 class="accordion-header" id="untouchedpanel">
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#untoucheddiv" aria-expanded="true" aria-control="untoucheddiv">unbearbeitete Anmeldungen
					</button>
				</h2>
				<div id="untoucheddiv" class="accordion-collapse collapse show dist8" aria-labelled="untouchedpanel" data-bs-parent="#mainacc">
					<table id="untouched">
						<thead>
							<tr>
								<th>Freizeit</th>
								<th>Name</th>
								<th>Rolle</th>
								<th>Anmeldedatum</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="u : ${untouched}">
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.camp} + ' ' + ${#temporals.format(u.date, 'yyyy')}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.fullname}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.rolename}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${#temporals.format(u.registered, 'yyyy-MM-dd')}"></a></td>
							</tr>
						</tbody>
					</table>
					<script type="text/javascript">
						$(document).ready(function() {
							$("#untouched").DataTable({
								language : locale_de,
								pageLength : 5,
								lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
							});
						});
					</script>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="accordion-header" id="approvedpanel">
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#approveddiv" aria-expanded="true" aria-control="approveddiv">bestätigte
						Anmeldungen</button>
				</h2>
				<div id="approveddiv" class="accordion-collapse collapse dist8" aria-labelled="approvedpanel" data-bs-parent="#mainacc">
					<table id="approved">
						<thead>
							<tr>
								<th>Freizeit</th>
								<th>Name</th>
								<th>Rolle</th>
								<th>Anmeldedatum</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="u : ${approved}">
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.camp} + ' ' + ${#temporals.format(u.date, 'yyyy')}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.fullname}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.rolename}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${#temporals.format(u.registered, 'yyyy-MM-dd')}"></a></td>
							</tr>
						</tbody>
					</table>
					<script type="text/javascript">
						$(document).ready(function() {
							$("#approved").DataTable({
								language : locale_de,
								pageLength : 5,
								lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
							});
						});
					</script>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="accordion-header" id="rejectedpanel">
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#rejecteddiv" aria-expanded="true" aria-control="rejecteddiv">abgelehnte
						Anmeldungen</button>
				</h2>
				<div id="rejecteddiv" class="accordion-collapse collapse dist8" aria-labelled="rejectedpanel" data-bs-parent="#mainacc">
					<table id="rejected">
						<thead>
							<tr>
								<th>Freizeit</th>
								<th>Name</th>
								<th>Rolle</th>
								<th>Anmeldedatum</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="u : ${rejected}">
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.camp} + ' ' + ${#temporals.format(u.date, 'yyyy')}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.fullname}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.rolename}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${#temporals.format(u.registered, 'yyyy-MM-dd')}"></a></td>
							</tr>
						</tbody>
					</table>
					<script type="text/javascript">
						$(document).ready(function() {
							$("#rejected").DataTable({
								language : locale_de,
								pageLength : 5,
								lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
							});
						});
					</script>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="accordion-header" id="revokedpanel">
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#revokeddiv" aria-expanded="true" aria-control="revokeddiv">stornierte
						Anmeldungen</button>
				</h2>
				<div id="revokeddiv" class="accordion-collapse collapse dist8" aria-labelled="revokedpanel" data-bs-parent="#mainacc">
					<table id="revoked">
						<thead>
							<tr>
								<th>Freizeit</th>
								<th>Name</th>
								<th>Rolle</th>
								<th>Anmeldedatum</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="u : ${revoked}">
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.camp} + ' ' + ${#temporals.format(u.date, 'yyyy')}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.fullname}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.rolename}"></a></td>
								<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${#temporals.format(u.registered, 'yyyy-MM-dd')}"></a></td>
							</tr>
						</tbody>
					</table>
					<script type="text/javascript">
						$(document).ready(function() {
							$("#revoked").DataTable({
								language : locale_de,
								pageLength : 5,
								lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
							});
						});
					</script>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="accordion-header" id="overviewpanel">
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#overviewdiv" aria-expanded="true" aria-control="overviewdiv">Freizeitenübersicht</button>
				</h2>
				<div id="overviewdiv" class="accordion-collapse collapse dist8" aria-labelled="overviewpanel" data-bs-parent="#mainacc">
					<table id="campoverview">
						<thead>
							<tr>
								<th>Freizeit</th>
								<th style="min-width: 64px">u/a/b</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="o : ${campoverview}">
								<td th:text="${o.camp} + ' ' + ${#temporals.format(o.date, 'yyyy')}"></td>
								<td><span th:text="${o.untouched}" class="badgetodo"></span> / <span th:text="${o.rejected}" class="badgewarn"></span> / <span th:text="${o.approved}" class="badgeinfo"></span> / <span th:text="${o.revoked}" class="badgeerror"></span></td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td>Zusammenfassung</td>
								<td><span th:text="${campoverviewsummary.untouched}" class="badgetodo"></span> / <span th:text="${campoverviewsummary.rejected}" class="badgewarn"></span> / <span
									th:text="${campoverviewsummary.approved}" class="badgeinfo"></span> / <span	th:text="${campoverviewsummary.revoked}" class="badgeerror"></span></td>
						</tfoot>
					</table>
					<script type="text/javascript">
						$(document).ready(function() {
							$("#campoverview").DataTable({
								language : locale_de,
								pageLength : 5,
								lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
							});
						});
					</script>
					<span>Legende:</span><span class="badgetodo">unbearbeitet</span><span class="badgewarn">abgelehnt</span><span class="badgeinfo">bestätigt</span><span class="badgeerror">storniert</span>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="accordion-header" id="searchpanel">
					<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#searchdiv" aria-expanded="true" aria-control="searchdiv">Suchmaske (einzelne Begriffe)</button>
				</h2>
				<div id="searchdiv" class="accordion-collapse collapse dist8" aria-labelled="searchpanel" data-bs-parent="#mainacc">
					<script th:inline="javascript">
						/*<![CDATA[*/
						var searchUrl = /*[[@{/confirmation/search}]]*/'?';
						var myAjax = new MyAjax(searchUrl);
						/*]]>*/
					</script>
					<input type="text" placeholder="bitte Suchtext eingeben" class="form-control" onchange="myAjax.call('searchresult', this.value)" />
					<div id="searchresult">
						Die Suche ist eine einfache Textsuche. Bestenfalls sollte nur ein Begriff zum Suchen verwendet werden, also z.B. nur der Vor- ODER der Nachname, nicht beides.<br /> Es werden nur wenige
						Felder in der Datenbank durchsucht: Vorname, Nachname, Freizeitname und Freizeitjahr.<br /> Die Suche wird nach dem Verlassen des Suchtext-Eingabefeldes aktiviert.
					</div>
				</div>
			</div>
		</div>
	</th:block>
</body>
</html>