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

{{ define "title" }}Settings - Integrations{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script src="/static/js/map-district.js"></script>
	<style>
		.settings-card {
			box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
			margin-bottom: 30px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container py-4">
		<div class="row">
			<div class="col-12">
				<div class="d-flex justify-content-between align-items-center mb-4">
					<h1><i class="bi bi-geo-alt-fill text-primary me-2"></i> District Settings</h1>
					<button class="btn btn-primary"><i class="bi bi-save me-2"></i>Save Changes</button>
				</div>
				
				<map-district
						district-id="{{.District.GID}}"
						centroid="{{.District.Centroid|json}}"
						xmin="{{.District.XMin}}"
						ymin="{{.District.YMin}}"
						xmax="{{.District.XMax}}"
						ymax="{{.District.YMax}}"
						tegola="{{.URL.Tegola}}"></map-district>
				
				<div class="row">
					<!-- Basic Information -->
					<div class="col-md-6">
						<div class="card settings-card">
							<div class="card-header bg-light">
								<h5><i class="bi bi-building me-2"></i> Organization Information</h5>
							</div>
							<div class="card-body">
								<div class="mb-3">
									<label for="agencyName" class="form-label"><i class="bi bi-briefcase me-1"></i> Agency Name</label>
									<input type="text" class="form-control" id="agencyName" value="Central District Water Authority">
								</div>
								<div class="mb-3">
									<label for="website" class="form-label"><i class="bi bi-globe me-1"></i> Website</label>
									<input type="url" class="form-control" id="website" value="https://cdwa.example.org">
								</div>
								<div class="mb-3">
									<label for="generalManager" class="form-label"><i class="bi bi-person-badge me-1"></i> General Manager Name</label>
									<input type="text" class="form-control" id="generalManager" value="Jane Smithson">
								</div>
								<div class="mb-3">
									<label for="contactPerson" class="form-label"><i class="bi bi-person me-1"></i> Contact Person</label>
									<input type="text" class="form-control" id="contactPerson" value="John Doe">
								</div>
							</div>
						</div>
					</div>
					
					<!-- Contact Information -->
					<div class="col-md-6">
						<div class="card settings-card">
							<div class="card-header bg-light">
								<h5><i class="bi bi-telephone me-2"></i> Contact Information</h5>
							</div>
							<div class="card-body">
								<div class="mb-3">
									<label for="address" class="form-label"><i class="bi bi-geo me-1"></i> Address</label>
									<input type="text" class="form-control" id="address" value="123 Main Street, Suite 400">
								</div>
								<div class="row">
									<div class="col-md-6 mb-3">
										<label for="city" class="form-label"><i class="bi bi-building me-1"></i> City</label>
										<input type="text" class="form-control" id="city" value="Centerville">
									</div>
									<div class="col-md-6 mb-3">
										<label for="postalCode" class="form-label"><i class="bi bi-mailbox me-1"></i> Postal Code</label>
										<input type="text" class="form-control" id="postalCode" value="12345">
									</div>
								</div>
								<div class="mb-3">
									<label for="phoneNumber" class="form-label"><i class="bi bi-telephone me-1"></i> Phone Number (Primary)</label>
									<input type="tel" class="form-control" id="phoneNumber" value="(555) 123-4567">
								</div>
								<div class="mb-3">
									<label for="secondaryPhone" class="form-label"><i class="bi bi-telephone-plus me-1"></i> Phone Number (Secondary)</label>
									<input type="tel" class="form-control" id="secondaryPhone" value="(555) 987-6543">
								</div>
								<div class="mb-3">
									<label for="faxNumber" class="form-label"><i class="bi bi-printer me-1"></i> Fax Number</label>
									<input type="tel" class="form-control" id="faxNumber" value="(555) 765-4321">
								</div>
							</div>
						</div>
					</div>
					
					<!-- District Coverage Information -->
					<div class="col-12">
						<div class="card settings-card">
							<div class="card-header bg-light">
								<h5><i class="bi bi-map me-2"></i> District Coverage</h5>
							</div>
							<div class="card-body">
								<div class="row">
									<div class="col-md-6 mb-3">
										<label for="totalArea" class="form-label"><i class="bi bi-rulers me-1"></i> Total Area (square kilometers)</label>
										<input type="number" class="form-control" id="totalArea" value="1250">
									</div>
									<div class="col-md-6 mb-3">
										<label for="countiesServed" class="form-label"><i class="bi bi-pin-map me-1"></i> Counties Served</label>
										<select class="form-select" id="countiesServed" multiple size="3">
											<option selected>Franklin County</option>
											<option selected>Jefferson County</option>
											<option selected>Washington County</option>
											<option>Lincoln County</option>
											<option>Adams County</option>
										</select>
										<small class="form-text text-muted">Hold Ctrl (or Cmd) to select multiple counties</small>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="d-flex justify-content-end mt-3">
					<button class="btn btn-secondary me-2"><i class="bi bi-x-circle me-1"></i> Cancel</button>
					<button class="btn btn-primary"><i class="bi bi-save me-1"></i> Save Changes</button>
				</div>
			</div>
		</div>
	</div>
{{ end }}