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

{{ define "title" }}Downloads{{ end }}
{{ define "extraheader" }}
	<style>
		.upload-card {
			transition: transform 0.2s;
			margin-bottom: 30px;
		}
		.upload-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		}
		.card-icon {
			font-size: 2.5rem;
			margin-bottom: 15px;
			color: #198754;
		}
		.header-banner {
			background-color: #198754;
			color: white;
		}
	</style>
{{ end }}

{{ define "content" }}
	<div class="container mb-5">
		<div class="row mb-4">
			<div class="col-md-12">
				<div class="alert alert-info">
					<i class="bi bi-info-circle-fill me-2"></i>
					Select a data type below to import information into the system.
					Supported file formats include CSV, Excel, and PDF documents.
				</div>
			</div>
		</div>

		<div class="row">
			<!-- Green Pool Management -->
			<div class="col-md-4">
				<div class="card h-100 upload-card border-success">
					<div class="card-body text-center">
						<i class="bi bi-water card-icon"></i>
						<h5 class="card-title">Green Pool Management</h5>
						<p class="card-text">
							Upload spreadsheets with addresses and contact information of
							unmaintained pools that may breed mosquitoes.
						</p>
						<p class="text-muted small">Supported formats: .xlsx, .csv, .xls</p>
						<div class="mb-3">
							<label for="greenPoolFile" class="form-label"
								>Select file to import</label
							>
							<input class="form-control" type="file" id="greenPoolFile" />
						</div>
						<button type="button" class="btn btn-success">
							<i class="bi bi-upload me-2"></i>Upload Green Pool Data
						</button>
					</div>
					<div class="card-footer bg-white text-muted">
						<small><i class="bi bi-clock"></i> Last import: 02/15/2023</small>
					</div>
				</div>
			</div>

			<!-- Employee Information -->
			<div class="col-md-4">
				<div class="card h-100 upload-card border-primary">
					<div class="card-body text-center">
						<i class="bi bi-people-fill card-icon" style="color: #0d6efd"></i>
						<h5 class="card-title">Employee Information</h5>
						<p class="card-text">
							Import employee data including names, contact information, and
							responsibilities for system user creation.
						</p>
						<p class="text-muted small">Supported formats: .xlsx, .csv</p>
						<div class="mb-3">
							<label for="employeeFile" class="form-label"
								>Select file to import</label
							>
							<input class="form-control" type="file" id="employeeFile" />
						</div>
						<button type="button" class="btn btn-primary">
							<i class="bi bi-upload me-2"></i>Upload Employee Data
						</button>
					</div>
					<div class="card-footer bg-white text-muted">
						<small><i class="bi bi-clock"></i> Last import: 03/01/2023</small>
					</div>
				</div>
			</div>

			<!-- Field Notebooks -->
			<div class="col-md-4">
				<div class="card h-100 upload-card border-warning">
					<div class="card-body text-center">
						<i class="bi bi-journal-text card-icon" style="color: #fd7e14"></i>
						<h5 class="card-title">Field Notebooks</h5>
						<p class="card-text">
							Upload scanned technician field notebooks to digitize information
							about breeding sources they've identified.
						</p>
						<p class="text-muted small">Supported formats: .pdf, .jpg, .png</p>
						<div class="mb-3">
							<label for="notebookFile" class="form-label"
								>Select file to import</label
							>
							<input class="form-control" type="file" id="notebookFile" />
						</div>
						<button type="button" class="btn btn-warning text-white">
							<i class="bi bi-upload me-2"></i>Upload Notebook Data
						</button>
					</div>
					<div class="card-footer bg-white text-muted">
						<small><i class="bi bi-clock"></i> Last import: 03/15/2023</small>
					</div>
				</div>
			</div>
		</div>

		<!-- Import History Section -->
		<div class="row mt-5">
			<div class="col-12">
				<h3><i class="bi bi-clock-history"></i> Recent Import History</h3>
				<table class="table table-striped table-hover">
					<thead class="table-dark">
						<tr>
							<th scope="col">Date/Time</th>
							<th scope="col">Import Type</th>
							<th scope="col">Filename</th>
							<th scope="col">Status</th>
							<th scope="col">Records</th>
							<th scope="col">Actions</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>03/15/2023 09:32 AM</td>
							<td>Field Notebooks</td>
							<td>march-field-notes.pdf</td>
							<td><span class="badge bg-success">Complete</span></td>
							<td>42 entries</td>
							<td>
								<button class="btn btn-sm btn-outline-primary">View</button>
							</td>
						</tr>
						<tr>
							<td>03/01/2023 02:15 PM</td>
							<td>Employee Information</td>
							<td>staff-2023-update.xlsx</td>
							<td><span class="badge bg-success">Complete</span></td>
							<td>18 employees</td>
							<td>
								<button class="btn btn-sm btn-outline-primary">View</button>
							</td>
						</tr>
						<tr>
							<td>02/15/2023 10:45 AM</td>
							<td>Green Pool Management</td>
							<td>feb-pools.csv</td>
							<td><span class="badge bg-success">Complete</span></td>
							<td>157 properties</td>
							<td>
								<button class="btn btn-sm btn-outline-primary">View</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
{{ end }}