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

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

		.success-icon {
			width: 100px;
			height: 100px;
			background-color: #28a745;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 2rem;
			color: white;
		}

		.confirmation-card {
			max-width: 600px;
			margin: 0 auto;
			border-radius: 10px;
		}

		.home-button {
			padding: 12px 30px;
			border-radius: 30px;
			font-weight: 600;
		}

		@media (max-width: 767px) {
			.header-title {
				font-size: 1.5rem;
			}

			.success-icon {
				width: 80px;
				height: 80px;
			}
		}
	</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 py-4">
		<div class="row justify-content-center">
			<div class="col-lg-10">
				<div class="card shadow confirmation-card">
					<div class="card-body p-4 p-md-5 text-center">
						<!-- Success Icon -->
						<div class="success-icon">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								width="50"
								height="50"
								fill="currentColor"
								class="bi bi-check-lg"
								viewBox="0 0 16 16"
							>
								<path
									d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
								/>
							</svg>
						</div>

						<h2 class="mb-4">Report Received!</h2>

						<p class="lead mb-4">
							Thank you for contributing to the health and well-being of our
							community.
						</p>

						<div class="mb-4 p-3 bg-light rounded-3">
							<p class="mb-0">
								Your mosquito report has been submitted successfully and will be
								reviewed by our team. Your effort helps us identify problem
								areas and better manage mosquito populations throughout our
								district.
							</p>
						</div>

						<p class="text-muted mb-4">
							Report ID:
							<span class="fw-bold"
								>#MM
								<script>
									document.write(Math.floor(Math.random() * 10000) + 10000);
								</script></span
							>
						</p>

						<a href="/" class="btn btn-primary home-button"> Return Home </a>
					</div>
				</div>

				<!-- Additional Info Card -->
				<div class="card mt-4 border-0 bg-light">
					<div class="card-body">
						<h5>What happens next?</h5>
						<p class="mb-0">
							Our team reviews all reports daily. Depending on the nature of
							your report, we may deploy field technicians to assess the area or
							add it to our scheduled mosquito control activities. For urgent
							matters, we prioritize responses based on public health risk
							factors.
						</p>
					</div>
				</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 }}