<!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="header">
		<ul class="navbar-nav mb-2 mb-lg-0">
			<li class="nav-item"><a th:href="@{/ical}" class="btn btn-secondary btn-icon-silent" target="_blank" title="Freizeitdaten als ical herunterladen"><i class="far fa-calendar-alt"></i></a>
			</li>
		</ul>
		<ul class="navbar-nav mb-2 mb-lg-0">
			<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/}">Unsere Freizeiten</a></li>
		</ul>
	</th:block>
	<th:block layout:fragment="content">
		<div class="mainpage">
			<script type="text/javascript">
				var mytoggle = new MyToggle();
			</script>
			<div class="card bottomdist16" style="max-width: 660px; margin-left: auto; margin-right: auto; background: transparent" th:each="c : ${camps}">
				<div class="card-header mytoggle_btn" style="background: transparent" th:onclick="mytoggle.toggle('campdiv_[[${c.pk}]]')">
					<div style="margin-left: auto; margin-right: auto;">
						<span th:text="${c.name}" class="headlinefont"></span><span class="headlinefont">&nbsp;</span><span th:text="${#numbers.formatInteger(c.year, 0)}" class="headlinefont"
							th:if="${c.year != null}"></span>
					</div>
				</div>
				<div th:id="'campdiv_' + ${c.pk}" class="card-body mytoggle_collapsed">
					<table style="width: 100%">
						<tr>
							<td rowspan="4"><img th:src="@{/images/Icon_Stern.svg}" width="36px" height="36px" style="margin-left: 24px" /></td>
							<td rowspan="4">
								<div>
									Biblische Geschichten<br /> Nachtwanderung<br /> Gruppenspiele<br /> Ausflüge<br /> Überraschungen
								</div>
							</td>
							<td><span class="cabin">Ort</span></td>
							<td><a th:href="${c.url}" th:text="${c.locationName}" target="_blank"></a></td>
						</tr>
						<tr>
							<td><img th:src="@{/images/Icon_Alter.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
							<td><div th:text="${c.minAge} + ' - ' + ${c.maxAge} + ' Jahre'" style="margin-top: 24px"></div></td>
						</tr>
						<tr>
							<td><img th:src="@{/images/Icon_Datum.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
							<td><div th:text="${#temporals.format(c.arrive, 'dd.MM.')} + ' - ' + ${#temporals.format(c.depart, 'dd.MM.yyyy')}" th:if="${c.arrive != null&&  c.depart != null}"
									style="margin-top: 24px"></div></td>
						</tr>
						<tr>
							<td><img th:src="@{/images/Icon_Preis.svg}" width="36px" height="36px" style="margin-top: 24px" /></td>
							<td><div style="margin-top: 24px">
									<p th:text="${c.price}"></p>
								</div></td>
						</tr>
					</table>
					<div style="text-align: center; margin-top: 64px">
						<a class="btn btn-linda buttonfont" th:href="@{/registration/{id}(id=${c.pk})}">jetzt anmelden</a>
					</div>
				</div>
			</div>
		</div>
	</th:block>
</body>
</html>