{{ template "sync/layout/authenticated.html" . }}

{{ define "title" }}Dash{{ end }}
{{ define "extraheader" }}
	{{ template "map" .MapData }}
	<style>
		.info-table {
			width: 100%;
		}

		.info-table td {
			padding: 5px 0;
		}

		.info-label {
			font-weight: 600;
			vertical-align: top;
		}
		.map-container {
			background-color: #e9ecef;
			height: 500px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			margin-bottom: 20px;
		}

		.section-header {
			margin-top: 30px;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 1px solid #dee2e6;
		}

		.source-info {
			background-color: #f8f9fa;
			padding: 15px;
			border-radius: 4px;
			margin-bottom: 20px;
		}

		.time-delta-positive {
			color: #dc3545; /* red for late */
		}

		.time-delta-negative {
			color: #28a745; /* green for early */
		}

		.time-delta-neutral {
			color: #6c757d; /* gray for on time */
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container mt-4 mb-5">
		<!-- Trap Header Section -->
		<div class="row mb-2">
			<div class="col-12">
				<h1>Trap Detail</h1>
			</div>
		</div>

		<div class="row mb-2">
			<div class="col-12">
				<div class="source-info">
					<div class="row">
						<div class="col-md-6">
							<div class="source-id">Trap ID: {{ .Trap.GlobalID }}</div>
							<table class="info-table">
								<tr>
									<td class="info-label">Active:</td>
									<td>{{ .Trap.Active }}</td>
								</tr>
								<tr>
									<td class="info-label">Comments:</td>
									<td>{{ .Trap.Comments }}</td>
								</tr>
								<tr>
									<td class="info-label">Description:</td>
									<td>{{ .Trap.Description }}</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Map Section -->
		<div class="row">
			<div class="col-12">
				<div class="map-container">
					<div id="map"></div>
				</div>
			</div>
		</div>

		<div class="row mb-2">
			<div class="col-12">
				<h2 class="section-header">Trap Collections</h2>
				<div class="table-responsive">
					<table class="table table-striped table-hover">
						<thead>
							<tr>
								<th>Collection Date</th>
								<th>Collection ID</th>
								<th>Females</th>
								<th>Male</th>
								<th>Total</th>
							</tr>
						</thead>
						<tbody>
							<!-- Trap 1 with multiple collections -->
							{{ range .Trap.Collections }}
								<tr>
									<td>{{ .EndDateTime|timeSincePtr }}</td>
									<td>{{ .GlobalID }}</td>
									<td>{{ .Count.Females }}</td>
									<td>{{ .Count.Males }}</td>
									<td>{{ .Count.Total }}</td>
								</tr>
							{{ end }}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
{{ end }}