{{template "base.html" .}}

{{define "title"}}Login{{end}}
{{define "style"}}
body {
	background-color: #f8f9fa;
}
.page-container {
	max-width: 600px;
	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;
}
.map-container {
	height: 300px;
	background-color: #e9ecef;
	border-radius: 10px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}
.map-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-image: url('https://placehold.co/600x300/e9ecef/adb5bd?text=Map+View');
	background-size: cover;
	background-position: center;
}
.map-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	color: #dc3545;
	font-size: 30px;
}
.address-container {
	background-color: #f8f9fa;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 20px;
	border-left: 4px solid #0d6efd;
}
.action-buttons {
	display: flex;
	gap: 10px;
}
.progress-container {
	margin: 30px 0 20px;
}
.progress {
	height: 8px;
}
{{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">Location</span>
			<span class="text-muted small">1 of 4</span>
		</div>
		<div class="progress">
			<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
	</div>
	
	<!-- Main Content -->
	<div class="content-card">
		<h1 class="h4 mb-4">Confirm Property Location</h1>
		
		<!-- Map View -->
		<div class="map-container">
			<div class="map-placeholder"></div>
			<div class="map-pin">
				<i class="bi bi-geo-alt-fill"></i>
			</div>
		</div>
		
		<!-- Address Information -->
		<div class="address-container">
			<div class="mb-2"><strong>Detected Address:</strong></div>
			<h5>123 Maple Street, Riverside, CA 92501</h5>
		</div>
		
		<div class="mb-4">
			<p>Is this the correct location of the property in question?</p>
		</div>
		
		<!-- Action Buttons -->
		<div class="action-buttons">
			<a href="{{ .NextURL }}" class="btn btn-success flex-grow-1">
				<i class="bi bi-check-circle me-2"></i> Correct
			</a>
			<a href="{{ .UpdateURL }}" class="btn btn-outline-primary flex-grow-1">
				<i class="bi bi-geo-alt me-2"></i> Update Location
			</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}}