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

{{ define "title" }}Settings - Integrations{{ end }}
{{ define "extraheader" }}
{{ end }}
{{ define "content" }}
	<div class="container py-5">
		<div class="row justify-content-center">
			<div class="col-lg-8">
				<!-- Header -->
				<div class="d-flex align-items-center mb-4">
					<i class="bi bi-globe2 text-primary fs-1 me-3"></i>
					<div>
						<h1 class="mb-0">ArcGIS Integration</h1>
						<p class="text-muted mb-0">Configure your Esri ArcGIS connection</p>
					</div>
				</div>

				<!-- Main Card -->
				<div class="card shadow-sm">
					<div class="card-body p-4">
						<form action="{{ .URL.Configuration.ArcGIS }}" method="POST">
							<!-- OAuth Authentication Section -->
							<div class="mb-4">
								<h5 class="card-title border-bottom pb-2 mb-3">
									<i class="bi bi-key-fill text-success me-2"></i>OAuth
									Authentication
								</h5>

								<div class="row g-3">
									<div class="col-md-6">
										<label class="form-label fw-semibold">ArcGIS ID</label>
										<input
											type="text"
											class="form-control"
											value="{{ .C.ArcGISAccount.ID }}"
											readonly
										/>
									</div>

									<div class="col-md-6">
										<label class="form-label fw-semibold"
											>Organization Name</label
										>
										<input
											type="text"
											class="form-control"
											value="{{ .C.ArcGISAccount.Name }}"
											readonly
										/>
									</div>

									<div class="col-md-12">
										<label class="form-label fw-semibold">Authorized By</label>
										<input
											type="text"
											class="form-control"
											value="{{ .C.ArcGISOAuth.Username }}"
											readonly
										/>
									</div>

									<div class="col-md-6">
										<label class="form-label fw-semibold">Token Age</label>
										<input
											type="text"
											class="form-control"
											value="{{ .C.ArcGISOAuth.Created|timeRelative }}"
											readonly
										/>
									</div>

									<div class="col-md-6">
										<label class="form-label fw-semibold"
											>Token Expiration</label
										>
										<input
											type="text"
											class="form-control"
											value="{{ .C.ArcGISOAuth.RefreshTokenExpires|timeRelative }}"
											readonly
										/>
									</div>
								</div>

								<!-- Token Actions -->
								<div class="mt-3 d-flex gap-2">
									<a
										class="btn btn-outline-primary"
										href="{{ .URL.OAuthRefreshArcGIS }}"
									>
										<i class="bi bi-arrow-clockwise me-1"></i>Refresh Token
									</a>
									<button
										type="button"
										class="btn btn-outline-danger"
										data-bs-toggle="modal"
										data-bs-target="#deleteModal"
									>
										<i class="bi bi-trash me-1"></i>Delete Token
									</button>
								</div>
							</div>

							<hr class="my-4" />

							<!-- Feature Layers Section -->
							<div class="mb-4">
								<h5 class="card-title border-bottom pb-2 mb-3">
									<i class="bi bi-layers-fill text-info me-2"></i>Feature Layer
									Configuration
								</h5>

								<div class="row g-3">
									<div class="col-md-12">
										<label for="map-service" class="form-label fw-semibold">
											Map Service (Aerial Imagery)
											<span class="text-danger">*</span>
										</label>
										<select
											class="form-select"
											id="map-service"
											name="map-service"
											required
										>
											{{ range .C.ServiceMaps }}
												<option value="{{ .ArcgisID }}">
													{{ .Name }}
												</option>
											{{ end }}
										</select>
										<div class="form-text">
											Select the feature layer for aerial imagery data
										</div>
									</div>
								</div>
							</div>

							<!-- Save Button -->
							<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
								<button type="button" class="btn btn-secondary me-md-2">
									Cancel
								</button>
								<button type="submit" class="btn btn-primary">
									<i class="bi bi-save me-1"></i>Save Configuration
								</button>
							</div>
						</form>
					</div>
				</div>

				<!-- Info Alert -->
				<div
					class="alert alert-info mt-3 d-flex align-items-start"
					role="alert"
				>
					<i class="bi bi-info-circle-fill me-2 flex-shrink-0"></i>
					<div>
						<strong>Note:</strong> Changes to feature layer selections will take
						effect immediately after saving. Refreshing the OAuth token will
						require re-authentication with your ArcGIS account.
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Delete Confirmation Modal -->
	<div
		class="modal fade"
		id="deleteModal"
		tabindex="-1"
		aria-labelledby="deleteModalLabel"
		aria-hidden="true"
	>
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger text-white">
					<h5 class="modal-title" id="deleteModalLabel">
						<i class="bi bi-exclamation-triangle-fill me-2"></i>Confirm Delete
					</h5>
					<button
						type="button"
						class="btn-close btn-close-white"
						data-bs-dismiss="modal"
						aria-label="Close"
					></button>
				</div>
				<div class="modal-body">
					<p class="mb-2">
						Are you sure you want to delete the OAuth token and disable the
						ArcGIS integration?
					</p>
					<p class="text-muted mb-0">
						<strong>This action cannot be undone.</strong> You will need to
						re-authenticate to restore the integration.
					</p>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						class="btn btn-secondary"
						data-bs-dismiss="modal"
					>
						Cancel
					</button>
					<button type="button" class="btn btn-danger">
						<i class="bi bi-trash me-1"></i>Delete Token
					</button>
				</div>
			</div>
		</div>
	</div>
{{ end }}