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

{{ define "title" }}Data Entry{{ end }}
{{ define "extraheader" }}
	<style>
		.results-container {
			max-width: 1000px;
			margin: 0 auto;
		}
		.error-code {
			font-family: monospace;
			padding: 0.2rem 0.4rem;
			background-color: rgba(220, 53, 69, 0.1);
			border-radius: 0.2rem;
			color: #dc3545;
		}
		.error-table {
			font-size: 0.9rem;
		}
		.error-suggestions {
			color: #495057;
		}
		.table-header-error {
			width: 40%;
		}
		.table-header-suggestion {
			width: 40%;
		}
		.table-header-line {
			width: 20%;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container mt-4 results-container mb-5">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<h2>Upload Failed: pools-data-2023.csv</h2>
			<span class="badge bg-danger rounded-pill">
				<i class="bi bi-x-circle me-1"></i> Validation Errors
			</span>
		</div>

		<div class="alert alert-danger" role="alert">
			<div class="d-flex align-items-center">
				<div class="me-3">
					<i
						class="bi bi-exclamation-triangle-fill"
						style="font-size: 2rem;"
					></i>
				</div>
				<div>
					<h4 class="alert-heading">CSV Upload Failed</h4>
					<p class="mb-0">
						Your file contains several errors that must be fixed before it can
						be processed. Details are provided below.
					</p>
				</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">Error Summary</h5>
				<a href="#" class="btn btn-sm btn-outline-secondary">
					<i class="bi bi-download me-1"></i> Download Error Log
				</a>
			</div>
			<div class="card-body">
				<p>
					We found <strong>12 errors</strong> in your CSV file. The most common
					issues are:
				</p>
				<ul>
					<li>
						<strong>Missing required column:</strong> The "Latitude" column is
						not present in your file
					</li>
					<li>
						<strong>Invalid data format:</strong> 8 GPS coordinates contain
						non-numeric values
					</li>
					<li>
						<strong>Empty required fields:</strong> 3 records are missing Plat
						ID values
					</li>
				</ul>

				<div class="alert alert-info" role="alert">
					<i class="bi bi-info-circle me-2"></i>
					<strong>Tip:</strong> Make sure your column names exactly match the
					required format. Column names are case-sensitive.
				</div>
			</div>
		</div>

		<div class="card mb-4">
			<div class="card-header bg-light">
				<h5 class="mb-0">Detailed Error Report</h5>
			</div>
			<div class="table-responsive">
				<table class="table table-striped error-table mb-0">
					<thead class="table-light">
						<tr>
							<th class="table-header-line">Line Number</th>
							<th class="table-header-error">Error</th>
							<th class="table-header-suggestion">Suggestion</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="fw-bold text-center">1</td>
							<td>
								<span class="error-code">MISSING_COLUMN</span><br />
								Required column "Latitude" is missing from the header row
							</td>
							<td class="error-suggestions">
								Add a "Latitude" column to your CSV file. Make sure the spelling
								and capitalization match exactly.
							</td>
						</tr>
						<tr>
							<td class="fw-bold text-center">5</td>
							<td>
								<span class="error-code">INVALID_DATA_FORMAT</span><br />
								GPS coordinate "37.45N" is not a valid decimal number
							</td>
							<td class="error-suggestions">
								Change "37.45N" to a decimal format (e.g., "37.45"). Remove any
								non-numeric characters except for the decimal point.
							</td>
						</tr>
						<tr>
							<td class="fw-bold text-center">8</td>
							<td>
								<span class="error-code">EMPTY_REQUIRED_FIELD</span><br />
								Plat ID is empty or missing
							</td>
							<td class="error-suggestions">
								Add a Plat ID value for this record. Each pool must have a
								unique identifier.
							</td>
						</tr>
						<tr>
							<td class="fw-bold text-center">12</td>
							<td>
								<span class="error-code">INVALID_DATA_FORMAT</span><br />
								GPS coordinate "unknown" is not a valid decimal number
							</td>
							<td class="error-suggestions">
								Replace "unknown" with the actual longitude value in decimal
								format (e.g., "-122.4194").
							</td>
						</tr>
						<tr>
							<td class="fw-bold text-center">17</td>
							<td>
								<span class="error-code">INVALID_DATA_FORMAT</span><br />
								GPS coordinate "N/A" is not a valid decimal number
							</td>
							<td class="error-suggestions">
								Replace "N/A" with the actual latitude value in decimal format
								(e.g., "37.7749").
							</td>
						</tr>
						<tr>
							<td class="fw-bold text-center">21</td>
							<td>
								<span class="error-code">EMPTY_REQUIRED_FIELD</span><br />
								Plat ID is empty or missing
							</td>
							<td class="error-suggestions">
								Add a Plat ID value for this record. Each pool must have a
								unique identifier.
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="card-footer bg-white">
				<nav aria-label="Error pagination">
					<ul class="pagination justify-content-center m-0">
						<li class="page-item disabled">
							<a class="page-link" href="#" tabindex="-1" aria-disabled="true"
								>Previous</a
							>
						</li>
						<li class="page-item active">
							<a class="page-link" href="#">1</a>
						</li>
						<li class="page-item"><a class="page-link" href="#">2</a></li>
						<li class="page-item">
							<a class="page-link" href="#">Next</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>

		<div class="card mb-4">
			<div class="card-header bg-light">
				<h5 class="mb-0">Next Steps</h5>
			</div>
			<div class="card-body">
				<ol>
					<li>
						Download the error log for a complete list of issues (optional)
					</li>
					<li>Fix the errors in your CSV file</li>
					<li>Re-upload the corrected file using the button below</li>
				</ol>

				<div class="alert alert-warning" role="alert">
					<i class="bi bi-lightbulb me-2"></i>
					<strong>Recommendation:</strong> Review our
					<a href="#" class="alert-link">CSV formatting guide</a> to ensure your
					file meets all requirements.
				</div>

				<div class="mt-4 text-center">
					<button class="btn btn-primary btn-lg" id="uploadNewBtn">
						<i class="bi bi-arrow-repeat me-2"></i> Upload Corrected File
					</button>
				</div>
			</div>
		</div>

		<div class="mt-4 text-center">
			<a href="#" class="text-muted">
				<i class="bi bi-question-circle me-1"></i> Need help? Contact support
			</a>
		</div>
	</div>
{{ end }}