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

{{ define "title" }}Dash{{ end }}
{{ define "extraheader" }}
	<style>
		.district-logo {
			max-height: 60px;
			width: auto;
		}

		.photo-upload-area {
			border: 2px dashed #ccc;
			border-radius: 8px;
			padding: 20px;
			text-align: center;
			margin-bottom: 20px;
			background-color: #f9f9f9;
		}

		.photo-preview {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 15px;
		}

		.photo-preview img {
			width: 80px;
			height: 80px;
			object-fit: cover;
			border-radius: 4px;
		}

		.submit-btn {
			padding: 15px 0;
			font-size: 1.25rem;
			border-radius: 8px;
		}

		.location-info {
			background-color: #e9f5ff;
			border-radius: 8px;
			padding: 12px;
			margin-bottom: 20px;
			font-size: 0.9rem;
		}

		@media (max-width: 767px) {
			.header-title {
				font-size: 1.5rem;
			}
		}
	</style>
{{ end }}
{{ define "content" }}
	<!-- Header -->
	<header class="bg-light py-2 mb-4">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-9">
					<h1 class="district-name header-title mb-0">[District Name]</h1>
				</div>
				<div class="col-3 text-end">
					<img
						src="placeholder-logo.png"
						alt="District Logo"
						class="district-logo"
					/>
				</div>
			</div>
		</div>
	</header>

	<!-- Main Content -->
	<main class="container mb-5">
		<div class="row justify-content-center">
			<div class="col-lg-8">
				<div class="card shadow-sm">
					<div class="card-body p-4">
						<h2 class="card-title text-center mb-4">Quick Mosquito Report</h2>

						<!-- Form -->
						<form action="/service-request-quick-confirmation" method="get">
							<!-- Location Automatic Collection Note -->
							<div class="location-info d-flex align-items-center mb-4">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="20"
									height="20"
									fill="currentColor"
									class="bi bi-geo-alt me-2"
									viewBox="0 0 16 16"
								>
									<path
										d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"
									/>
									<path
										d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
									/>
								</svg>
								<span
									>Your location and current time will be automatically
									collected with your report.</span
								>
							</div>

							<!-- Photo Upload -->
							<div class="mb-4">
								<label for="photos" class="form-label fw-bold"
									>Photos (Optional)</label
								>
								<div class="photo-upload-area">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										width="32"
										height="32"
										fill="currentColor"
										class="bi bi-camera mb-2"
										viewBox="0 0 16 16"
									>
										<path
											d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"
										/>
										<path
											d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"
										/>
									</svg>
									<div>
										<input
											type="file"
											id="photos"
											class="d-none"
											accept="image/*"
											multiple
										/>
										<button
											type="button"
											class="btn btn-outline-primary mb-2"
											onclick="document.getElementById('photos').click()"
										>
											Add Photos
										</button>
									</div>
									<small class="d-block text-muted"
										>Take pictures of the mosquito problem area</small
									>

									<!-- Photo Preview Area (would be populated by JavaScript) -->
									<div class="photo-preview mt-3">
										<!-- Example preview images (these would be dynamically added) -->
										<img
											src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='%23dddddd'%3E%3Crect width='80' height='80' fill='%23eeeeee'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='12' fill='%23999999'%3EPreview%3C/text%3E%3C/svg%3E"
											alt="Preview"
										/>
									</div>
								</div>
							</div>

							<!-- Comments -->
							<div class="mb-4">
								<label for="comments" class="form-label fw-bold"
									>Comments</label
								>
								<textarea
									class="form-control"
									id="comments"
									rows="4"
									placeholder="Describe the mosquito issue (e.g., standing water, high mosquito activity, time of day they're most active)"
								></textarea>
							</div>

							<!-- Submit Button -->
							<button
								type="submit"
								class="btn btn-success w-100 submit-btn mt-4"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="20"
									height="20"
									fill="currentColor"
									class="bi bi-send-fill me-2"
									viewBox="0 0 16 16"
								>
									<path
										d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"
									/>
								</svg>
								Submit Report
							</button>
						</form>
					</div>
				</div>

				<!-- Back Link -->
				<div class="text-center mt-3">
					<a href="javascript:history.back()" class="text-decoration-none">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="16"
							height="16"
							fill="currentColor"
							class="bi bi-arrow-left me-1"
							viewBox="0 0 16 16"
						>
							<path
								fill-rule="evenodd"
								d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
							/>
						</svg>
						Back to home
					</a>
				</div>
			</div>
		</div>
	</main>

	<!-- Footer -->
	<footer class="bg-dark text-white py-3 mt-auto">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<p class="mb-0 small">
						&copy; 2023 [District Name] Mosquito Management District
					</p>
				</div>
				<div class="col-md-6 text-md-end">
					<p class="mb-0 small">Contact: (555) 123-4567</p>
				</div>
			</div>
		</div>
	</footer>
{{ end }}