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

{{ define "title" }}Review - Pools{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script>
		function onLoad() {}
		window.addEventListener("load", onLoad);
	</script>
	<style>
		body {
			background-color: #f5f5f5;
		}
		.left-panel {
			background-color: white;
			height: 100vh;
			overflow-y: auto;
			border-right: 1px solid #dee2e6;
		}
		.middle-panel {
			background-color: white;
			height: 100vh;
			overflow-y: auto;
			padding: 20px;
		}
		.right-panel {
			background-color: white;
			height: 100vh;
			overflow-y: auto;
			border-left: 1px solid #dee2e6;
			padding: 20px;
		}
		.entry-item {
			padding: 15px;
			border-bottom: 1px solid #e9ecef;
			cursor: pointer;
			transition: background-color 0.2s;
		}
		.entry-item:hover {
			background-color: #f8f9fa;
		}
		.entry-item.active {
			background-color: #e7f3ff;
			border-left: 4px solid #0d6efd;
		}
		.placeholder-box {
			background-color: #e9ecef;
			border: 2px dashed #adb5bd;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #6c757d;
			font-size: 18px;
			margin-bottom: 20px;
		}
		.map-placeholder {
			height: 300px;
		}
		.image-placeholder {
			height: 400px;
		}
		.action-btn {
			width: 100%;
			margin-bottom: 10px;
			padding: 12px;
			font-size: 16px;
		}
		.status-badge {
			font-size: 11px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container-fluid">
		<div class="row">
			<!-- Left Column - Entry List -->
			<div class="col-md-3 p-0 left-panel">
				<div class="p-3 border-bottom bg-primary text-white">
					<h5 class="mb-0"><i class="bi bi-list-ul"></i> Review Queue</h5>
					<small>12 entries pending</small>
				</div>

				<div class="entry-item active">
					<div class="d-flex justify-content-between align-items-start">
						<div>
							<strong>Entry #2847</strong>
							<span class="badge bg-warning status-badge ms-1">Pending</span>
						</div>
						<small class="text-muted">2 min ago</small>
					</div>
					<small class="text-muted d-block mt-1">1234 Oak Street</small>
				</div>

				<div class="entry-item">
					<div class="d-flex justify-content-between align-items-start">
						<div>
							<strong>Entry #2846</strong>
							<span class="badge bg-warning status-badge ms-1">Pending</span>
						</div>
						<small class="text-muted">15 min ago</small>
					</div>
					<small class="text-muted d-block mt-1">5678 Maple Avenue</small>
				</div>

				<div class="entry-item">
					<div class="d-flex justify-content-between align-items-start">
						<div>
							<strong>Entry #2845</strong>
							<span class="badge bg-warning status-badge ms-1">Pending</span>
						</div>
						<small class="text-muted">32 min ago</small>
					</div>
					<small class="text-muted d-block mt-1">9012 Pine Road</small>
				</div>

				<div class="entry-item">
					<div class="d-flex justify-content-between align-items-start">
						<div>
							<strong>Entry #2844</strong>
							<span class="badge bg-warning status-badge ms-1">Pending</span>
						</div>
						<small class="text-muted">1 hour ago</small>
					</div>
					<small class="text-muted d-block mt-1">3456 Elm Boulevard</small>
				</div>

				<div class="entry-item">
					<div class="d-flex justify-content-between align-items-start">
						<div>
							<strong>Entry #2843</strong>
							<span class="badge bg-warning status-badge ms-1">Pending</span>
						</div>
						<small class="text-muted">2 hours ago</small>
					</div>
					<small class="text-muted d-block mt-1">7890 Birch Lane</small>
				</div>

				<div class="entry-item">
					<div class="d-flex justify-content-between align-items-start">
						<div>
							<strong>Entry #2842</strong>
							<span class="badge bg-success status-badge ms-1">Reviewed</span>
						</div>
						<small class="text-muted">3 hours ago</small>
					</div>
					<small class="text-muted d-block mt-1">2468 Cedar Court</small>
				</div>
			</div>

			<!-- Middle Column - Details and Media -->
			<div class="col-md-6 p-0 middle-panel">
				<div class="mb-4">
					<h4 class="mb-3">Entry #2847 Details</h4>

					<form>
						<div class="row mb-3">
							<label class="col-sm-3 col-form-label fw-bold">Address:</label>
							<div class="col-sm-9">
								<input
									type="text"
									class="form-control"
									value="1234 Oak Street, Springfield, CA 90210"
									readonly
								/>
							</div>
						</div>

						<div class="row mb-3">
							<label class="col-sm-3 col-form-label fw-bold"
								>Pool Condition:</label
							>
							<div class="col-sm-9">
								<select class="form-select">
									<option selected>Good</option>
									<option>Fair</option>
									<option>Poor</option>
									<option>Excellent</option>
									<option>Needs Maintenance</option>
								</select>
							</div>
						</div>

						<div class="row mb-3">
							<label class="col-sm-3 col-form-label fw-bold"
								>Owner Contact:</label
							>
							<div class="col-sm-9">
								<input
									type="text"
									class="form-control"
									value="John Smith - (555) 123-4567"
								/>
							</div>
						</div>

						<div class="row mb-4">
							<label class="col-sm-3 col-form-label fw-bold"
								>Resident Contact:</label
							>
							<div class="col-sm-9">
								<input
									type="text"
									class="form-control"
									value="Jane Smith - (555) 123-4568"
								/>
							</div>
						</div>
					</form>
				</div>

				<!-- Map Placeholder -->
				<div class="placeholder-box map-placeholder">
					<div class="text-center">
						<i class="bi bi-map" style="font-size: 48px;"></i>
						<p class="mb-0 mt-2">Map View Placeholder</p>
						<small>1234 Oak Street, Springfield, CA 90210</small>
					</div>
				</div>

				<!-- Aerial Image Placeholder -->
				<div class="placeholder-box image-placeholder">
					<div class="text-center">
						<i class="bi bi-image" style="font-size: 48px;"></i>
						<p class="mb-0 mt-2">Aerial Pool Image Placeholder</p>
						<small>Captured: March 15, 2024</small>
					</div>
				</div>
			</div>

			<!-- Right Column - Actions -->
			<div class="col-md-3 p-0 right-panel">
				<h5 class="mb-4">Actions</h5>

				<button class="btn btn-success action-btn">
					<i class="bi bi-check-circle"></i> Mark Reviewed
				</button>

				<button class="btn btn-danger action-btn">
					<i class="bi bi-trash"></i> Discard Entry
				</button>

				<hr class="my-4" />

				<h6 class="mb-3">Additional Options</h6>

				<button class="btn btn-outline-primary action-btn">
					<i class="bi bi-flag"></i> Flag for Review
				</button>

				<button class="btn btn-outline-secondary action-btn">
					<i class="bi bi-arrow-left"></i> Previous Entry
				</button>

				<button class="btn btn-outline-secondary action-btn">
					<i class="bi bi-arrow-right"></i> Next Entry
				</button>

				<hr class="my-4" />

				<div class="card">
					<div class="card-body">
						<h6 class="card-title">Review Statistics</h6>
						<ul class="list-unstyled mb-0">
							<li class="mb-2"><strong>Today:</strong> 8 reviewed</li>
							<li class="mb-2"><strong>This Week:</strong> 47 reviewed</li>
							<li><strong>Remaining:</strong> 12 pending</li>
						</ul>
					</div>
				</div>

				<div class="card mt-3">
					<div class="card-body">
						<h6 class="card-title">Notes</h6>
						<textarea
							class="form-control"
							rows="4"
							placeholder="Add notes about this entry..."
						></textarea>
						<button class="btn btn-sm btn-primary mt-2 w-100">
							Save Notes
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}