{{ 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">
		<!-- Source Header Section -->
		<div class="row mb-2">
			<div class="col-12">
				<h1>Breeding Source 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">Source ID: {{ .Source.GlobalID }}</div>
							<table class="info-table">
								<tr>
									<td class="info-label">Access:</td>
									<td>{{ .Source.AccessDescription }}</td>
								</tr>
								<tr>
									<td class="info-label">Address:</td>
									<td>Not implemented</td>
								</tr>
								<tr>
									<td class="info-label">Comments:</td>
									<td>{{ .Source.Comments }}</td>
								</tr>
								<tr>
									<td class="info-label">Deactivate Reason:</td>
									<td>{{ .Source.DeactivateReason }}</td>
								</tr>
								<tr>
									<td class="info-label">Description:</td>
									<td>{{ .Source.Description }}</td>
								</tr>
								<tr>
									<td class="info-label">Habitat:</td>
									<td>{{ .Source.Habitat }}</td>
								</tr>
								<tr>
									<td class="info-label">Jurisdiction:</td>
									<td>{{ .Source.Jurisdiction }}</td>
								</tr>
								<tr>
									<td class="info-label">Location Number:</td>
									<td>{{ .Source.LocationNumber }}</td>
								</tr>
								<tr>
									<td class="info-label">Name:</td>
									<td>{{ .Source.Name }}</td>
								</tr>
								<tr>
									<td>Status</td>
									<td>
										{{ if .Source.Active }}
											<span class="badge bg-warning">Active</span>
										{{ else }}
											<span class="badge bg-info">Inactive</span>
										{{ end }}
									</td>
								</tr>
								<tr>
									<td class="info-label">Priority:</td>
									<td>{{ .Source.Priority }} ({{ .Source.ScalarPriority }})</td>
								</tr>
								<tr>
									<td class="info-label">S Type:</td>
									<td>{{ .Source.SourceType }}</td>
								</tr>
								<tr>
									<td class="info-label">Source Status:</td>
									<td>{{ .Source.SourceStatus }}</td>
								</tr>
								<tr>
									<td class="info-label">Symbology:</td>
									<td>{{ .Source.Symbology }}</td>
								</tr>
								<tr>
									<td class="info-label">Use Type:</td>
									<td>{{ .Source.UseType }}</td>
								</tr>
								<tr>
									<td class="info-label">Water Origin:</td>
									<td>{{ .Source.WaterOrigin }}</td>
								</tr>
								<tr>
									<td class="info-label">Zone:</td>
									<td>{{ .Source.Zone }}.{{ .Source.Zone2 }}</td>
								</tr>
							</table>
						</div>
						<div class="col-md-6">
							<table class="info-table">
								<tr>
									<td class="info-label">Creation date</td>
									<td>{{ .Source.Created|timeSincePtr }}</td>
								</tr>
								<tr>
									<td class="info-label">Edit date</td>
									<td>{{ .Source.EditedAt|timeSincePtr }}</td>
								</tr>
								<tr>
									<td class="info-label">Larva Inspect Interval</td>
									<td>{{ .Source.LarvaeInspectInterval }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Activity</td>
									<td>{{ .Source.LastInspectionActivity }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Avg Larva</td>
									<td>{{ .Source.LastInspectionAverageLarvae }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Avg Pupae</td>
									<td>{{ .Source.LastInspectionAveragePupae }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Breeding</td>
									<td>{{ .Source.LastInspectionBreeding }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Conditions</td>
									<td>{{ .Source.LastInspectionConditions }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Date</td>
									<td>{{ .Source.LastInspectionDate|timeSincePtr }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Species</td>
									<td>{{ .Source.LastInspectionFieldSpecies }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Inspect Life Stages</td>
									<td>{{ .Source.LastInspectionLifeStages }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Treat Activity</td>
									<td>{{ .Source.LastTreatmentActivity }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Treat Date</td>
									<td>{{ .Source.LastTreatmentDate|timeSincePtr }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Treat Product</td>
									<td>{{ .Source.LastTreatmentProduct }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Treat Quantity</td>
									<td>{{ .Source.LastTreatmentQuantity }}</td>
								</tr>
								<tr>
									<td class="info-label">Last Treat Quantity Unit</td>
									<td>{{ .Source.LastTreatmentQuantityUnit }}</td>
								</tr>
								<tr>
									<td class="info-label">Next action date scheduled:</td>
									<td>{{ .Source.NextActionScheduledDate|timeSincePtr }}</td>
								</tr>
								<tr>
									<td class="info-label">Treatment Cadence:</td>
									<td>Not implemented</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>

		<!-- Two-Column Layout for Tables -->
		<div class="row">
			<!-- Left Column -->
			<div class="col-md-6">
				<!-- Treatments Section -->
				<h2 class="section-header">Treatment History</h2>
				<div class="card mb-4">
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-striped">
								<tbody>
									<tr>
										<th>Year</th>
										<th>Start</th>
										<th>End</th>
										<th>Interval</th>
									</tr>
									{{ range .TreatmentModels }}
										<tr>
											<td>{{ .Year }}</td>
											<td>{{ .SeasonStart|timeAsRelativeDate }}</td>
											<td>{{ .SeasonEnd|timeAsRelativeDate }}</td>
											<td>{{ .Interval|timeInterval }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
							<table class="table table-striped table-hover">
								<thead>
									<tr>
										<th>Treatment Date</th>
										<th>Insecticide Used</th>
										<th>Cadence Delta</th>
										<th>Technician Notes</th>
									</tr>
								</thead>
								<tbody>
									{{ range .Treatments }}
										<tr>
											<td>{{ .Date|timeSincePtr }}</td>
											<td>{{ .Product }}</td>
											<td class="time-delta-neutral">
												{{ .CadenceDelta|timeDelta }}
											</td>
											<td>{{ .Notes }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<!-- Right Column -->
			<div class="col-md-6">
				<!-- Inspections Section -->
				<h2 class="section-header">Inspection History</h2>
				<div class="card mb-4">
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-striped table-hover">
								<thead>
									<tr>
										<th>Inspection Date</th>
										<th>Action</th>
										<th>Notes</th>
									</tr>
								</thead>
								<tbody>
									{{ range .Inspections }}
										<tr>
											<td>{{ .Date|timeSincePtr }}</td>
											<td>{{ .Action }}</td>
											<td>{{ .Notes }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row mb-2">
			<div class="col-12">
				<h2 class="section-header">Nearby Mosquito Traps</h2>
				{{ range .Traps }}
					<div class="trap-info">
						<table class="info-table">
							<tbody>
								<tr>
									<td class="info-label">Trap ID:</td>
									<td><a href="/trap/{{ .ID }}">{{ .ID }}</a></td>
								</tr>
								<tr>
									<td class="info-label">Distance</td>
									<td>{{ .Distance }}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="table-responsive">
						<table class="table table-striped table-hover">
							<thead>
								<tr>
									<th>Collection Date</th>
									<th>Female Count</th>
									<th>Male Count</th>
									<th>Total Count</th>
								</tr>
							</thead>
							<tbody>
								<!-- Trap 1 with multiple collections -->
								{{ range .Counts }}
									<tr>
										<td>{{ .Ended|timeSincePtr }}</td>
										<td>{{ .Females }}</td>
										<td>{{ .Males }}</td>
										<td>{{ .Total }}</td>
									</tr>
								{{ end }}
							</tbody>
						</table>
					</div>
				{{ end }}
			</div>
		</div>
	</div>
{{ end }}