{{template "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">Location:</td>
								<td>{{ .Source.LatLng|latLngDisplay }}</td>
							</tr>
							<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|timeSince }}</td>
							</tr>
							<tr>
								<td class="info-label">Edit date</td>
								<td>{{ .Source.EditedAt|timeSince }}</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|timeSince }}</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|timeSince }}</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|timeSince }}</td>
							</tr>
							<tr>
								<td class="info-label">Updated:</td>
								<td>{{ .Source.Updated|timeSince }}</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">
						<p>Estimated Treatment Cadence: {{.TreatmentCadence|timeInterval}}</p>
						<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|timeSince}}</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|timeSince}}</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>{{ .ID }}</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|timeSince }}</td>
								<td>{{ .Females }}</td>
								<td>{{ .Males }}</td>
								<td>{{ .Total }}</td>
							</tr>
							{{ end }}
						{{ end }}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
{{end}}