<!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>
	<th:block layout:fragment="content">
		<div class="tablebox" sec:authorize="hasRole('admin')">
			<div class="alert alert-info">
				Hier werden zusätzliche Dokumente für Freizeiten bereitgestellt. Die Wegbeschreibung, die Bestätigung und die Jahrespläne sind davon nicht betroffen.
			</div>
			<form th:action="@{/admin/campdocument/add}" method="post" th:object="${campdocument}">
				<table id="cammpdocs" class="table table-striped" style="width: 100% !important">
					<thead>
						<tr>
							<td>ID</td>
							<td>Freizeit</td>
							<td>Dokument</td>
						</tr>
					</thead>
					<tbody>
						<tr th:each="cd : ${campdocuments}">
							<td>
								<div class="dropdown" style="display: inline">
									<button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
										<i class="fas fa-trash-alt"></i>
									</button>
									<ul class="dropdown-menu">
										<li><a class="dropdown-item" th:href="@{/admin/campdocument/delete/{id}(id=${cd.pk})}">Kombination endgültig löschen</a>
									</ul>
								</div>
							</td>
							<td th:text="${campmap.get(cd.fkCamp)}"></td>
							<td th:text="${documentmap.get(cd.fkDocument)}"></td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td><button type="submit" class="btn btn-outline-primary"><i class="fa fa-plus"></i></button></td>
							<td>
							  <select id="campnew" th:field="*{fkCamp}" class="form-select select2-single">
							  	<option value="" label="--- bitte wählen ---" />
							  	<option th:each="c : ${camps}" th:value="${c.pk}" th:label="${c}" />
							  </select>
							</td>
							<td>
								<select id="documentnew" th:field="*{fkDocument}" class="form-select select2-single">
							  	<option value="" label="--- bitte wählen ---" />
							  	<option th:each="d : ${documents}" th:value="${d.pk}" th:label="${d}" />
							  </select>
							</td>
						</tr>
					</tfoot>
				</table>
			</form>
			<script>
				$(document).ready(function() {
					$("#campdocs").DataTable({
						language : locale_de
					});
				});
			</script>
		</div>
	</th:block>
</body>
</html>