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

{{ define "title" }}Login{{ end }}
{{ define "extraheader" }}
	<style>
		body {
			background-color: #f8f9fa;
		}
		.page-container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		.content-card {
			background-color: white;
			border-radius: 15px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			padding: 25px;
			margin-bottom: 20px;
		}
		.logo-area {
			text-align: center;
			margin-bottom: 20px;
		}
		.logo-placeholder {
			height: 50px;
			max-width: 200px;
			margin: 0 auto;
		}
		.photo-gallery {
			display: flex;
			gap: 10px;
			margin-bottom: 20px;
			overflow-x: auto;
			padding-bottom: 10px;
		}
		.photo-item {
			min-width: 200px;
			height: 150px;
			border-radius: 8px;
			overflow: hidden;
			border: 2px solid #dee2e6;
		}
		.photo-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.data-section {
			margin-bottom: 25px;
		}
		.section-title {
			font-size: 1.1rem;
			font-weight: 600;
			margin-bottom: 10px;
			color: #0d6efd;
			display: flex;
			align-items: center;
		}
		.section-title i {
			margin-right: 8px;
		}
		.table-container {
			overflow-x: auto;
			margin-bottom: 15px;
		}
		.alert-info {
			background-color: #e8f4f8;
			border-color: #b8daff;
		}
		.progress-container {
			margin: 30px 0 20px;
		}
		.progress {
			height: 8px;
		}
		.trap-high {
			color: #dc3545;
			font-weight: bold;
		}
		.trap-medium {
			color: #fd7e14;
			font-weight: bold;
		}
		.trap-low {
			color: #198754;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="page-container">
		<!-- Logo -->
		<div class="logo-area">
			<img
				src="https://placehold.co/200x50/e9ecef/adb5bd?text=County+Vector+Control"
				alt="County Vector Control"
				class="logo-placeholder"
			/>
		</div>

		<!-- Progress Bar -->
		<div class="progress-container">
			<div class="d-flex justify-content-between mb-1">
				<span class="text-muted small">Evidence</span>
				<span class="text-muted small">2 of 4</span>
			</div>
			<div class="progress">
				<div
					class="progress-bar"
					role="progressbar"
					style="width: 50%"
					aria-valuenow="50"
					aria-valuemin="0"
					aria-valuemax="100"
				></div>
			</div>
		</div>

		<!-- Main Content -->
		<div class="content-card">
			<h1 class="h4 mb-4">Evidence of Potential Breeding Site</h1>

			<!-- Aerial Photos -->
			<div class="data-section">
				<div class="section-title">
					<i class="bi bi-camera-fill"></i> Aerial Surveillance Photos
				</div>
				<p class="small text-muted mb-2">
					These photos were taken during routine aerial surveillance of the
					area.
				</p>

				<div class="photo-gallery">
					<div class="photo-item">
						<img
							src="https://placehold.co/200x150/76b5c5/ffffff?text=Aerial+Photo+1"
							alt="Aerial photo of property"
						/>
					</div>
					<div class="photo-item">
						<img
							src="https://placehold.co/200x150/3e8e7e/ffffff?text=Aerial+Photo+2"
							alt="Aerial photo of property"
						/>
					</div>
					<div class="photo-item">
						<img
							src="https://placehold.co/200x150/7accc8/ffffff?text=Aerial+Photo+3"
							alt="Aerial photo of property"
						/>
					</div>
				</div>
			</div>

			<!-- Historical Inspections -->
			<div class="data-section">
				<div class="section-title">
					<i class="bi bi-clipboard-check-fill"></i> Historical Inspection Data
				</div>
				<div class="table-container">
					<table class="table table-striped table-sm">
						<thead>
							<tr>
								<th>Date</th>
								<th>Inspector</th>
								<th>Findings</th>
								<th>Action</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Mar 15, 2023</td>
								<td>J. Martinez</td>
								<td>Pool water stagnant, green</td>
								<td>Treatment applied, owner notified</td>
							</tr>
							<tr>
								<td>Nov 02, 2022</td>
								<td>L. Johnson</td>
								<td>Pool water clear, maintained</td>
								<td>No action needed</td>
							</tr>
							<tr>
								<td>Aug 18, 2022</td>
								<td>S. Williams</td>
								<td>Minor algae formation</td>
								<td>Owner provided maintenance resources</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<!-- Mosquito Trap Data -->
			<div class="data-section">
				<div class="section-title">
					<i class="bi bi-bug-fill"></i> Mosquito Trap Count Data
				</div>
				<div class="table-container">
					<table class="table table-striped table-sm">
						<thead>
							<tr>
								<th>Date Collected</th>
								<th>Count</th>
								<th>Distance</th>
								<th>Level</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Jun 12, 2023</td>
								<td>42</td>
								<td>0.3 miles</td>
								<td class="trap-high">High</td>
							</tr>
							<tr>
								<td>Jun 05, 2023</td>
								<td>36</td>
								<td>0.3 miles</td>
								<td class="trap-high">High</td>
							</tr>
							<tr>
								<td>May 29, 2023</td>
								<td>28</td>
								<td>0.3 miles</td>
								<td class="trap-medium">Medium</td>
							</tr>
							<tr>
								<td>May 22, 2023</td>
								<td>15</td>
								<td>0.3 miles</td>
								<td class="trap-low">Low</td>
							</tr>
							<tr>
								<td>May 15, 2023</td>
								<td>12</td>
								<td>0.3 miles</td>
								<td class="trap-low">Low</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<!-- Public Health Information -->
			<div class="alert alert-info">
				<h5><i class="bi bi-info-circle me-2"></i>Why This Matters</h5>
				<p>
					The data above shows mosquito activity in your area. Recent trap
					counts indicate elevated mosquito populations, which increases the
					risk of mosquito-borne diseases like West Nile virus.
				</p>
				<p>
					Unmaintained swimming pools can produce thousands of mosquitoes each
					week. By addressing potential breeding sites, you're helping protect
					your family and neighbors from these health risks.
				</p>
				<p class="mb-0">
					<strong>We need your help</strong> to ensure we maintain public health
					by keeping mosquito counts low in your neighborhood. Your cooperation
					makes a significant difference in community safety.
				</p>
			</div>

			<!-- Action Button -->
			<div class="d-grid gap-2 mt-4">
				<a href="{{ .URLs.ReportContribute }}" class="btn btn-primary btn-lg">
					<i class="bi bi-arrow-right-circle me-2"></i> Next Step: Upload
					Current Photos
				</a>
			</div>
		</div>

		<!-- Help Text -->
		<div class="text-center text-muted small">
			<p>
				If you need assistance, please contact Vector Control at (555) 123-4567
			</p>
		</div>
	</div>
{{ end }}