{% extends "avistamientos/base.html" %}

{% block title %}Mapa fondeos ilegales - GEN-GOB{% endblock %}

{% block extra_css %}
    <style>
        body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 0; color: #333; }
        header { padding: 1rem 1.5rem; background: #0f3d3e; color: white; display: flex; justify-content: space-between; align-items: center; }
        header h1 { margin: 0; font-size: 1.3rem; }
        header a { color: white; background: #198754; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; font-weight: bold; }
        header a:hover { background: #157347; }
        #mapa-completo { height: calc(100vh - 65px); width: 100vw; }
        .popup-foto { width: 100%; max-height: 140px; object-fit: cover; border-radius: 4px; margin-top: 0.5rem; }
    </style>
{% endblock %}

{% block content %}
    
    <div id="mapa-completo"></div>

    <!-- Django inyecta los datos como JSON seguro -->
    {{ puntos|json_script:"puntos-data" }}
{% endblock %}
{% block extra_js %}
    <script>
        const mapa = L.map('mapa-completo').setView([39.0, 1.5], 9);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(mapa);

        // Leemos el JSON inyectado por Django
        const avistamientos = JSON.parse(document.getElementById('puntos-data').textContent);

        avistamientos.forEach(item => {
            let contenidoPopup = `
                <div style="font-size: 0.95rem;">
                    <strong>Fecha:</strong> ${item.fecha}<br>
                    <p style="margin: 0.5rem 0 0;">${item.descripcion}</p>
            `;

            if (item.foto_url) {
                contenidoPopup += `<img src="${item.foto_url}" class="popup-foto" alt="Evidencia">`;
            }

            contenidoPopup += `</div>`;

            L.marker([item.lat, item.lng])
                .addTo(mapa)
                .bindPopup(contenidoPopup);
        });
    </script>
{% endblock %}