<!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">
<body>
	<div th:fragment="camplist(camps)">
		<div class="accordion block660" id="accordionExample">
			<div class="accordion-item" th:each="c : ${camps}">
				<h2 class="accordion-header" style="background: transparent" th:id="'heading' + ${c.pk}">
					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" th:data-bs-target="'#collapse' + ${c.pk}" aria-expanded="false" th:aria-controls="'collapse' + ${c.pk}">
						<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>
					</button>
				</h2>
				<div th:id="'collapse' + ${c.pk}" class="accordion-collapse collapse" th:aria-labelledby="'heading' + ${c.pk}" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						<div class="container">
							<div class="row g-5">
								<div class="col-2 d-flex align-items-center">
									<img th:src="@{/images/Icon_Stern.svg}" width="36px" height="36px" />
								</div>
								<div class="col-4 d-flex align-items-center">
									Biblische Geschichten<br /> Nachtwanderung<br /> Gruppenspiele<br /> Ausflüge<br /> Überraschungen
								</div>
								<div class="col-6">
									<div class="container">
										<div class="row g-3">
											<div class="col-4 cabin">Ort</div>
											<div class="col-8">
												<a th:href="${c.url}" th:text="${c.locationName}" target="_blank"></a>
											</div>
											<div class="col-4"><img th:src="@{/images/Icon_Alter.svg}" width="36px" height="36px" /></div>
											<div class="col-8" th:text="${c.minAge} + ' - ' + ${c.maxAge} + ' Jahre'"></div>
											<div class="col-4"><img th:src="@{/images/Icon_Datum.svg}" width="36px" height="36px" /></div>
											<div class="col-8"><span th:text="${#temporals.format(c.arrive, 'dd.MM.')} + ' - ' + ${#temporals.format(c.depart, 'dd.MM.yyyy')}" th:if="${c.arrive != null && c.depart != null}"></span></div>
											<div class="col-4"><img th:src="@{/images/Icon_Preis.svg}" width="36px" height="36px" /></div>
											<div class="col-8"><p th:text="${c.price}"></p></div>
										</div>
									</div>
								</div>
							</div>
							<div class="row g-5" th:if="${c.bedsFemale + c.bedsMale > 0 and c.bookingHasStarted}">
							  <div class="col-2"><img th:src="@{/images/Icon_Bett.svg}" width="48px" height="48px" /></div>
							  <div class="col-10 d-flex align-items-center" th:text="${'es sind nur noch ' + (c.bedsFemale - c.blockedBedsFemale - c.usedBedsFemale) + ' Mädchen- und ' + (c.bedsMale - c.blockedBedsMale - c.usedBedsMale) + ' Jungs- von ' + (c.bedsFemale + c.bedsMale) + ' Betten frei'}"></div>
							  <div class="col-12 alert alert-info alert-dismissible fade show" role="alert">
							  	Sollten alle Betten bereits belegt sein, wird Deine Anmeldung auf die Warteliste gesetzt.
							  	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
							  </div>
							</div>
							<div class="row g-5" th:unless="${c.bookingHasStarted}">
								<div class="col-12 alert alert-info" role="alert">
								  Die Anmeldung wird erst am <span th:text="${#temporals.format(c.startBooking, 'dd.MM.yyyy, HH:mm')}"></span> Uhr, freigeschaltet.
								</div>
							</div>
						</div>
						<div style="text-align: center; margin-top: 48px" th:if="${c.bookingHasStarted}">
							<a class="btn btn-linda buttonfont" th:href="@{/registration/{id}(id=${c.pk})}">jetzt anmelden</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>