{{ template "base.html" . }}

{{ define "title" }}Notification Request Complete{{ end }}
{{ define "extraheader" }}
	<style></style>
	<script></script>
{{ end }}
{{ define "content" }}
	<div class="container py-5">
		<div class="row justify-content-center">
			<div class="col-lg-7">
				<!-- Confirmation Card -->
				<div class="card shadow-sm border-info mb-4">
					<div class="card-header bg-info text-white">
						<h3 class="my-2">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								width="24"
								height="24"
								fill="currentColor"
								class="bi bi-bell-fill me-2"
								viewBox="0 0 16 16"
							>
								<path
									d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"
								/>
							</svg>
							Notifications Registered
						</h3>
					</div>
					<div class="card-body p-4 text-center">
						<div class="mb-4">
							<div class="display-1 text-info mb-3">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="80"
									height="80"
									fill="currentColor"
									class="bi bi-check-circle-fill"
									viewBox="0 0 16 16"
								>
									<path
										d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
									/>
								</svg>
							</div>
							<h4 class="mb-3">Thank You!</h4>
							<p class="lead">
								Your contact information has been successfully registered for
								report updates.
							</p>
							<div class="alert alert-secondary py-3 mt-3">
								<strong>Report ID:</strong>
								<span class="fs-5">{{ .ReportID|publicReportID }}</span>
							</div>
						</div>

						<hr class="my-4" />

						<!-- What to Expect Section -->
						<div class="text-start mb-4">
							<h5>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="18"
									height="18"
									fill="currentColor"
									class="bi bi-info-circle me-2"
									viewBox="0 0 16 16"
								>
									<path
										d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
									/>
									<path
										d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
									/>
								</svg>
								What to Expect
							</h5>
							<ul class="list-group list-group-flush">
								<li class="list-group-item bg-transparent">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										width="16"
										height="16"
										fill="currentColor"
										class="bi bi-envelope-check me-2 text-success"
										viewBox="0 0 16 16"
									>
										<path
											d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"
										/>
										<path
											d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"
										/>
									</svg>
									A confirmation message has been sent to your contact
									information.
								</li>
								<li class="list-group-item bg-transparent">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										width="16"
										height="16"
										fill="currentColor"
										class="bi bi-clipboard-check me-2 text-success"
										viewBox="0 0 16 16"
									>
										<path
											fill-rule="evenodd"
											d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
										/>
										<path
											d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"
										/>
										<path
											d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"
										/>
									</svg>
									You will receive updates when:
									<ul class="mt-2">
										<li>Your report is assigned to a specialist</li>
										<li>A site visit is scheduled</li>
										<li>Treatment or remediation is completed</li>
										<li>The case is resolved</li>
									</ul>
								</li>
								<li class="list-group-item bg-transparent">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										width="16"
										height="16"
										fill="currentColor"
										class="bi bi-search me-2 text-success"
										viewBox="0 0 16 16"
									>
										<path
											d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
										/>
									</svg>
									You can check your report status anytime using your Report ID.
								</li>
							</ul>
						</div>

						<!-- Navigation Buttons -->
						<div class="mt-4">
							<a
								href="/status/{{ .ReportID }}"
								class="btn btn-outline-primary me-2"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									width="16"
									height="16"
									fill="currentColor"
									class="bi bi-search me-1"
									viewBox="0 0 16 16"
								>
									<path
										d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
									/>
								</svg>
								Check Report Status
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}