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

{{ define "title" }}Dash{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script src="/static/js/map-cell.js"></script>
{{ end }}
{{ define "content" }}
	<div class="container mt-4 mb-5">
		<!-- Location Header Section -->
		<div class="row mb-4">
			<div class="col-12">
				<h1>Location Data View</h1>
			</div>
		</div>

		<!-- Map and Address Section - Side by Side -->
		<div class="row mb-4">
			<div class="col-md-8">
				<map-cell
					geojson="{{ .MapData.GeoJSON|json }}"
					latitude="{{ .MapData.Center.Lat }}"
					longitude="{{ .MapData.Center.Lng }}"
					organization-id="{{ .User.Organization.ID }}"
					tegola="{{ .URL.Tegola }}"
					zoom="{{ .MapData.Zoom }}"
				/>
			</div>
			<div class="col-md-4">
				<div class="card h-100">
					<div class="card-body address-container">
						<h5>Approximate Address:</h5>
						<p class="lead" id="location-address">
							123 Main St, Anytown, ST 12345
						</p>

						<hr class="location-divider" />

						<h5>Cell Coordinates (Hexagon):</h5>
						<div class="table-responsive">
							<table class="coordinates-table">
								<tbody>
									{{ range $i, $cb := .CellBoundary }}
										<tr>
											<td><strong>Vertex {{ $i }}:</strong></td>
											<td>{{ $cb|latLngDisplay }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
						<hr class="location-divider" />
						<p>{{ .CellBoundary|GISStatement }}</p>
					</div>
				</div>
			</div>
		</div>

		<!-- Two-Column Layout for Tables -->
		<div class="row">
			<!-- Left Column -->
			<div class="col-md-6">
				<!-- Breeding Sources Section -->
				<h2 class="section-header">Mosquito Breeding Sources</h2>
				<div class="card mb-4">
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-striped table-hover">
								<thead>
									<tr>
										<th>ID</th>
										<th>Source Type</th>
										<th>Last Inspected</th>
										<th>Last Treated</th>
									</tr>
								</thead>
								<tbody>
									{{ range .BreedingSources }}
										<tr>
											<td>
												<a href="/source/{{ .ID }}">{{ .ID|uuidShort }}</a>
											</td>
											<td>{{ .Type }}</td>
											<td>{{ .LastInspected|timeRelativePtr }}</td>
											<td>{{ .LastTreated|timeRelativePtr }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
						<!--
					<nav aria-label="Breeding sources pagination">
						<ul class="pagination justify-content-center">
							<li class="page-item disabled">
								<a class="page-link" href="#" tabindex="-1">Previous</a>
							</li>
							<li class="page-item active"><a class="page-link" href="#">1</a></li>
							<li class="page-item"><a class="page-link" href="#">2</a></li>
							<li class="page-item"><a class="page-link" href="#">3</a></li>
							<li class="page-item">
								<a class="page-link" href="#">Next</a>
							</li>
						</ul>
					</nav>
					-->
					</div>
				</div>

				<!-- Inspections Section -->
				<h2 class="section-header">Inspections 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>LocationID</th>
										<th>Location</th>
										<th>Date</th>
										<th>Action</th>
										<th>Notes</th>
									</tr>
								</thead>
								<tbody>
									{{ range .Inspections }}
										<tr>
											<td>
												<a href="/source/{{ .LocationID }}"
													>{{ .LocationID|uuidShort }}</a
												>
											</td>
											<td>{{ .Location }}</td>
											<td>{{ .Date|timeRelativePtr }}</td>
											<td>{{ .Action }}</td>
											<td>{{ .Notes }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>

						<!--
					<nav aria-label="Inspections pagination">
						<ul class="pagination justify-content-center">
							<li class="page-item disabled">
								<a class="page-link" href="#" tabindex="-1">Previous</a>
							</li>
							<li class="page-item active"><a class="page-link" href="#">1</a></li>
							<li class="page-item"><a class="page-link" href="#">2</a></li>
							<li class="page-item"><a class="page-link" href="#">3</a></li>
							<li class="page-item">
								<a class="page-link" href="#">Next</a>
							</li>
						</ul>
					</nav>
					-->
					</div>
				</div>
			</div>

			<!-- Right Column -->
			<div class="col-md-6">
				<h2 class="section-header">Traps</h2>
				{{ if gt (len .Traps) 0 }}
					<div class="card mb-4">
						<div class="card-body">
							<div class="table-responsive">
								<table class="table table-striped table-hover">
									<thead>
										<tr>
											<th>ID</th>
											<th>Active</th>
											<th>Comments</th>
										</tr>
									</thead>
									<tbody>
										{{ range .Traps }}
											<tr>
												<td>
													<a href="/trap/{{ .GlobalID }}"
														>{{ .GlobalID|uuidShort }}</a
													>
												</td>
												<td>{{ .Active }}</td>
												<td>{{ .Comments }}</td>
											</tr>
										{{ end }}
									</tbody>
								</table>
							</div>
						</div>
					</div>
				{{ else }}
					<p>No traps</p>
				{{ end }}


				<!-- 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 table-hover">
								<thead>
									<tr>
										<th>Location</th>
										<th>Treatment Date</th>
										<th>Insecticide Used</th>
										<th>Technician Notes</th>
									</tr>
								</thead>
								<tbody>
									{{ range .Treatments }}
										<tr>
											<td>
												<a href="/source/{{ .LocationID }}"
													>{{ .LocationID|uuidShort }}</a
												>
											</td>
											<td>{{ .Date|timeRelativePtr }}</td>
											<td>{{ .Product }}</td>
											<td>{{ .Notes }}</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>

						<!--
					<nav aria-label="Treatments pagination">
						<ul class="pagination justify-content-center">
							<li class="page-item disabled">
								<a class="page-link" href="#" tabindex="-1">Previous</a>
							</li>
							<li class="page-item active"><a class="page-link" href="#">1</a></li>
							<li class="page-item"><a class="page-link" href="#">2</a></li>
							<li class="page-item"><a class="page-link" href="#">3</a></li>
							<li class="page-item">
								<a class="page-link" href="#">Next</a>
							</li>
						</ul>
					</nav>
					-->
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}