{{ template "sync/layout/authenticated.html" . }}
{{ define "title" }}Pool Upload{{ end }}

{{ define "extraheader" }}
{{ end }}
{{ define "content" }}
	<div class="container mt-4 results-container">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<h2>Upload Results: {{ .Upload.Name }}</h2>
			{{ if eq .Upload.Status "parsed" }}
				<span class="badge bg-success rounded-pill">
					<i class="bi bi-check-circle me-1"></i> File Parsed Successfully
				</span>
			{{ else if eq .Upload.Status "error" }}
				<span class="badge bg-danger rounded-pill">
					<i class="bi bi-exclamation me-1"></i> File Has Problems
				</span>
			{{ else if eq .Upload.Status "uploaded" }}
				<span class="badge bg-info rounded-pill">
					<i class="bi bi-arrow-clockwise me-1"></i> File Is Processing
				</span>
			{{ else }}
				<span class="badge bg-warning rounded-pill">
					<i class="bi bi-question me-1"></i> Unknown status
				</span>
			{{ end }}
		</div>

		<div class="row mb-4">
			<div class="col-md-4">
				<div class="card summary-card h-100 border-primary">
					<div class="card-body text-center">
						<h1 class="display-4 text-primary">{{ .Upload.CountExisting }}</h1>
						<h5>Existing Pools</h5>
						<p class="text-muted">Matches found in previous records</p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card summary-card h-100 border-success">
					<div class="card-body text-center">
						<h1 class="display-4 text-success">{{ .Upload.CountNew }}</h1>
						<h5>New Pools</h5>
						<p class="text-muted">Not found in existing records</p>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card summary-card h-100 border-warning">
					<div class="card-body text-center">
						<h1 class="display-4 text-warning">{{ .Upload.CountOutside }}</h1>
						<h5>Outside District</h5>
						<p class="text-muted">Potential geocoding errors</p>
					</div>
				</div>
			</div>
		</div>

		<div class="card mb-4">
			<div
				class="card-header bg-light d-flex justify-content-between align-items-center"
			>
				<h5 class="mb-0">Data Preview</h5>
				<div class="form-check form-switch">
					<input class="form-check-input" type="checkbox" id="showIssuesOnly" />
					<label class="form-check-label" for="showIssuesOnly"
						>Show issues only</label
					>
				</div>
			</div>
			<div class="card-body">
				{{ range .Upload.Errors }}
					<div class="alert alert-danger" role="alert">
						<i class="bi bi-exclamation-triangle me-2"></i>
						<strong>Error:</strong>{{ .Message }}
					</div>
				{{ end }}
				{{ if eq (len .Upload.Pools) 0 }}
					<div class="alert alert-warning" role="alert">
						<i class="bi bi-exclamation-triangle me-2"></i>
						<strong>Warning:</strong> No pools could be understood from your
						file.
					</div>
				{{ else }}
					<div class="table-responsive">
						<table class="table table-hover table-striped">
							<thead class="table-light">
								<tr>
									<th>Street</th>
									<th>City</th>
									<th>Post</th>
									<th>Status</th>
									<th>Condition</th>
								</tr>
							</thead>
							<tbody>
								{{ range .Upload.Pools }}
									<tr>
										<td>{{ .Street }}</td>
										<td>{{ .City }}</td>
										<td>{{ .PostalCode }}</td>
										{{ if eq .Status "new" }}
											<td>
												<span class="badge bg-success status-badge">New</span>
											</td>
										{{ else if eq .Status "existing" }}
											<td>
												<span class="badge bg-primary status-badge"
													>Existing</span
												>
											</td>
										{{ else if eq .Status "outside" }}
											<td>
												<span class="badge bg-warning status-badge"
													>Outside</span
												>
											</td>
										{{ else }}
											<td>
												<span class="badge bg-warning status-badge"
													>{{ .Status }}</span
												>
											</td>
										{{ end }}
									</tr>
								{{ end }}
							</tbody>
						</table>
					</div>
				{{ end }}
			</div>
		</div>

		<div class="card mb-4">
			<div class="card-header bg-light">
				<h5 class="mb-0">Notes & Recommendations</h5>
			</div>
			<div class="card-body">
				<div class="mb-3">
					<p><strong>Issues detected:</strong></p>
					<ul>
						<li>
							4 pools appear to be outside district boundaries (possible
							geocoding errors)
						</li>
						<li>All required fields are present and properly formatted</li>
					</ul>
				</div>

				<div class="alert alert-info" role="alert">
					<i class="bi bi-info-circle me-2"></i>
					<strong>Note:</strong> You may proceed with this upload or edit your
					CSV file to fix the issues identified.
				</div>
			</div>
		</div>

		<div class="d-flex justify-content-between mt-4 mb-5">
			<a href="{{ .URL.PoolCSVUpload }}" class="btn btn-outline-secondary">
				<i class="bi bi-arrow-left me-1"></i> Upload Edited File
			</a>
			<button class="btn btn-primary" id="confirmUploadBtn">
				<i class="bi bi-check2 me-1"></i> Confirm and Submit Data
			</button>
		</div>
	</div>
{{ end }}