{{template "base.html" .}}

{{define "title"}}Login{{end}}
{{define "style"}}
        body {
            background-color: #f8f9fa;
        }
        .page-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .content-card {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 25px;
            margin-bottom: 20px;
        }
        .logo-area {
            text-align: center;
            margin-bottom: 20px;
        }
        .logo-placeholder {
            height: 50px;
            max-width: 200px;
            margin: 0 auto;
        }
        .photo-gallery {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        .photo-item {
            min-width: 200px;
            height: 150px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid #dee2e6;
        }
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .data-section {
            margin-bottom: 25px;
        }
        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #0d6efd;
            display: flex;
            align-items: center;
        }
        .section-title i {
            margin-right: 8px;
        }
        .table-container {
            overflow-x: auto;
            margin-bottom: 15px;
        }
        .alert-info {
            background-color: #e8f4f8;
            border-color: #b8daff;
        }
        .progress-container {
            margin: 30px 0 20px;
        }
        .progress {
            height: 8px;
        }
        .trap-high {
            color: #dc3545;
            font-weight: bold;
        }
        .trap-medium {
            color: #fd7e14;
            font-weight: bold;
        }
        .trap-low {
            color: #198754;
        }
{{end}}
{{define "content"}}
    <div class="page-container">
        <!-- Logo -->
        <div class="logo-area">
            <img src="https://placehold.co/200x50/e9ecef/adb5bd?text=County+Vector+Control" alt="County Vector Control" class="logo-placeholder">
        </div>
        
        <!-- Progress Bar -->
        <div class="progress-container">
            <div class="d-flex justify-content-between mb-1">
                <span class="text-muted small">Evidence</span>
                <span class="text-muted small">2 of 4</span>
            </div>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="content-card">
            <h1 class="h4 mb-4">Evidence of Potential Breeding Site</h1>
            
            <!-- Aerial Photos -->
            <div class="data-section">
                <div class="section-title">
                    <i class="bi bi-camera-fill"></i> Aerial Surveillance Photos
                </div>
                <p class="small text-muted mb-2">These photos were taken during routine aerial surveillance of the area.</p>
                
                <div class="photo-gallery">
                    <div class="photo-item">
                        <img src="https://placehold.co/200x150/76b5c5/ffffff?text=Aerial+Photo+1" alt="Aerial photo of property">
                    </div>
                    <div class="photo-item">
                        <img src="https://placehold.co/200x150/3e8e7e/ffffff?text=Aerial+Photo+2" alt="Aerial photo of property">
                    </div>
                    <div class="photo-item">
                        <img src="https://placehold.co/200x150/7accc8/ffffff?text=Aerial+Photo+3" alt="Aerial photo of property">
                    </div>
                </div>
            </div>
            
            <!-- Historical Inspections -->
            <div class="data-section">
                <div class="section-title">
                    <i class="bi bi-clipboard-check-fill"></i> Historical Inspection Data
                </div>
                <div class="table-container">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Inspector</th>
                                <th>Findings</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Mar 15, 2023</td>
                                <td>J. Martinez</td>
                                <td>Pool water stagnant, green</td>
                                <td>Treatment applied, owner notified</td>
                            </tr>
                            <tr>
                                <td>Nov 02, 2022</td>
                                <td>L. Johnson</td>
                                <td>Pool water clear, maintained</td>
                                <td>No action needed</td>
                            </tr>
                            <tr>
                                <td>Aug 18, 2022</td>
                                <td>S. Williams</td>
                                <td>Minor algae formation</td>
                                <td>Owner provided maintenance resources</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Mosquito Trap Data -->
            <div class="data-section">
                <div class="section-title">
                    <i class="bi bi-bug-fill"></i> Mosquito Trap Count Data
                </div>
                <div class="table-container">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>Date Collected</th>
                                <th>Count</th>
                                <th>Distance</th>
                                <th>Level</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Jun 12, 2023</td>
                                <td>42</td>
                                <td>0.3 miles</td>
                                <td class="trap-high">High</td>
                            </tr>
                            <tr>
                                <td>Jun 05, 2023</td>
                                <td>36</td>
                                <td>0.3 miles</td>
                                <td class="trap-high">High</td>
                            </tr>
                            <tr>
                                <td>May 29, 2023</td>
                                <td>28</td>
                                <td>0.3 miles</td>
                                <td class="trap-medium">Medium</td>
                            </tr>
                            <tr>
                                <td>May 22, 2023</td>
                                <td>15</td>
                                <td>0.3 miles</td>
                                <td class="trap-low">Low</td>
                            </tr>
                            <tr>
                                <td>May 15, 2023</td>
                                <td>12</td>
                                <td>0.3 miles</td>
                                <td class="trap-low">Low</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Public Health Information -->
            <div class="alert alert-info">
                <h5><i class="bi bi-info-circle me-2"></i>Why This Matters</h5>
                <p>The data above shows mosquito activity in your area. Recent trap counts indicate elevated mosquito populations, which increases the risk of mosquito-borne diseases like West Nile virus.</p>
                <p>Unmaintained swimming pools can produce thousands of mosquitoes each week. By addressing potential breeding sites, you're helping protect your family and neighbors from these health risks.</p>
                <p class="mb-0"><strong>We need your help</strong> to ensure we maintain public health by keeping mosquito counts low in your neighborhood. Your cooperation makes a significant difference in community safety.</p>
            </div>
            
            <!-- Action Button -->
            <div class="d-grid gap-2 mt-4">
		    <a href="{{ .NextURL }}" class="btn btn-primary btn-lg">
			    <i class="bi bi-arrow-right-circle me-2"></i> Next Step: Upload Current Photos
		    </a>
            </div>
        </div>
        
        <!-- Help Text -->
        <div class="text-center text-muted small">
            <p>If you need assistance, please contact Vector Control at (555) 123-4567</p>
        </div>
    </div>
{{end}}