{{template "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;
}
.map-container {
	height: 350px;
	background-color: #e9ecef;
	border-radius: 10px;
	margin-bottom: 25px;
	position: relative;
	overflow: hidden;
	border: 1px solid #dee2e6;
}
.map-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-image: url('https://placehold.co/800x350/e9ecef/adb5bd?text=Interactive+Map');
	background-size: cover;
	background-position: center;
}
.map-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	color: #dc3545;
	font-size: 30px;
	filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));
}
.map-instructions {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(255, 255, 255, 0.9);
	padding: 10px 15px;
	border-radius: 20px;
	font-size: 14px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	max-width: 90%;
	text-align: center;
}
.or-divider {
	display: flex;
	align-items: center;
	margin: 25px 0;
	color: #6c757d;
}
.or-divider::before, .or-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #dee2e6;
}
.or-divider::before {
	margin-right: 15px;
}
.or-divider::after {
	margin-left: 15px;
}
.info-box {
	background-color: #e8f4f8;
	border-left: 4px solid #0d6efd;
	padding: 15px;
	border-radius: 5px;
	margin-bottom: 20px;
}
.info-box p:last-child {
	margin-bottom: 0;
}
.form-section {
	margin-bottom: 25px;
}
</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>
	
	<!-- Main Content -->
	<div class="content-card">
		<h1 class="h4 mb-4">Update Property Location</h1>
		
		<!-- Information Box -->
		<div class="info-box mb-4">
			<h5><i class="bi bi-info-circle me-2"></i>Two Ways to Update Location</h5>
			<p>You can update the property location by either clicking on the map or entering an address below. Both methods will automatically update each other.</p>
		</div>
		
		<!-- Map Section -->
		<div class="form-section">
			<h5 class="mb-3">Option 1: Select Location on Map</h5>
			<div class="map-container">
				<div class="map-placeholder"></div>
				<div class="map-pin">
					<i class="bi bi-geo-alt-fill"></i>
				</div>
				<div class="map-instructions">
					<i class="bi bi-hand-index me-2"></i> Click or tap anywhere on the map to set the location
				</div>
			</div>
		</div>
		
		<!-- Divider -->
		<div class="or-divider">OR</div>
		
		<!-- Address Form -->
		<div class="form-section">
			<h5 class="mb-3">Option 2: Enter Address</h5>
			<form>
				<div class="mb-3">
					<label for="streetAddress" class="form-label">Street Address</label>
					<input type="text" class="form-control" id="streetAddress" placeholder="123 Main Street">
				</div>
				
				<div class="row g-3">
					<div class="col-md-6">
						<label for="city" class="form-label">City</label>
						<input type="text" class="form-control" id="city" placeholder="Riverside">
					</div>
					
					<div class="col-md-3">
						<label for="state" class="form-label">State</label>
						<select class="form-select" id="state">
							<option selected>CA</option>
							<option>AZ</option>
							<option>NV</option>
							<option>OR</option>
							<!-- Add more states as needed -->
						</select>
					</div>
					
					<div class="col-md-3">
						<label for="zipCode" class="form-label">ZIP Code</label>
						<input type="text" class="form-control" id="zipCode" placeholder="92501">
					</div>
				</div>
			</form>
		</div>
		
		<!-- Current Coordinates Display -->
		<div class="mb-4 p-3 bg-light rounded small text-muted">
			<div class="d-flex justify-content-between">
				<span>Current Coordinates:</span>
				<span>33.9806° N, 117.3755° W</span>
			</div>
		</div>
		
		<!-- Action Buttons -->
		<div class="d-flex justify-content-between">
			<button type="button" class="btn btn-outline-secondary" id="cancelBtn">
				Nevermind
			</button>
			<button type="button" class="btn btn-primary" id="saveBtn">
				<i class="bi bi-check-circle me-2"></i> Save Updates
			</button>
		</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}}