nidus-sync/html/template/sync/setting-district.html

{{ 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="{{ .District.Agency }}"
									/>
								</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="{{ .District.Website }}"
									/>
								</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="{{ .District.GeneralManager }}"
									/>
								</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="{{ .District.Contact }}"
									/>
								</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="{{ .District.Address }}"
									/>
								</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="{{ .District.City1 }},{{ .District.City2 }}"
										/>
									</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="{{ .District.PostalCode }}"
										/>
									</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="{{ .District.Phone1 }}"
									/>
								</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="{{ .District.Phone2 }}"
									/>
								</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="{{ .District.Fax }}"
									/>
								</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
											meters)</label
										>
										<input
											type="number"
											class="form-control"
											id="totalArea"
											value="{{ .District.SurfaceAreaMetersSquare }}"
										/>
									</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 }}