nidus-sync/html/template/rmo/mailer/root.html

89 lines
2.2 KiB
HTML

{{ template "rmo/layout/base.html" . }}
{{ define "title" }}Report Standing Water{{ 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-locator-ro.js"></script>
{{ end }}
{{ define "content" }}
<div class="page-container">
<!-- Logo -->
<div class="logo-area">
<img src="{{ .C.URLLogo }}" alt="Vector Control District Logo" />
</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">
<map-locator-ro
marker="{{ .C.Address.LocationGeoJSON|json }}"
id="map"
></map-locator-ro>
</div>
<!-- Address Information -->
<div class="address-container">
<div class="mb-2"><strong>Detected Address:</strong></div>
<h5>
{{ .C.Address.Number }} {{ .C.Address.Street }},
{{ .C.Address.Locality }},
{{ .C.Address.Region }}
{{ .C.Address.PostalCode }}
</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">
<form
action="{{ call .URL.RMO.Mailer.Confirm .C.PublicID }}"
method="POST"
>
<button type="submit" class="btn btn-success flex-grow-1">
<i class="bi bi-check-circle me-2"></i> Correct
</button>
</form>
<a
href="{{ call .URL.RMO.Mailer.Update .C.PublicID }}"
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 }}