{{template "authenticated.html" .}}

{{define "title"}}Dash{{end}}
{{define "extraheader"}}
{{template "map" .MapData}}
<style>
.address-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.section-header {
	margin-top: 30px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dee2e6;
}
</style>
{{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">
			<div class="map-container">
				<div id="map"></div>
			</div>
		</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|timeSince}}</td>
									<td>{{.LastTreated|timeSince}}</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|timeSince}}</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">
			<!-- 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|timeSince}}</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}}