<!DOCTYPE html>
<html data-theme="light" lang="es" style="background-color: rgb(205, 243, 148); color: black;">
<head>
    <!-- BASE !-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bachemapa - Mapa interactivo de baches y otras cosas</title>
    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='pico.amber.css') }}"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>
    <!-- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.src.js"
    integrity="sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU="
    crossorigin=""></script> -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<link rel="icon" href="{{ url_for('static', filename='images/favico.ico') }}" type="image/x-icon">
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favico.ico') }}" type="image/x-icon">
<!-- <script src="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/leaflet.markercluster.js" type="text/javascript"></script> -->
<script type="application/importmap" src="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/leaflet.markercluster-src.js.map"></script>
<link href="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/MarkerCluster.css">
<link href="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/MarkerCluster.Default.css">
    <script src="{{ url_for('static', filename='leaflet.markercluster.js')}}"></script>
    <!-- <script src="{{ url_for('static', filename='src/MarkerClusterGroup.js')}}"></script> -->

    <!-- <script type="importmap" src="{{ url_for('static', filename='leaflet.markercluster.js.map')}}"></script>
    <link href="{{ url_for('static', filename='MarkerCluster.css')}}">
    <link href="{{ url_for('static', filename='MarkerCluster.Default.css')}}"> -->
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">

    <!-- Primary Meta Tags -->
    <meta name="description" content="Bachemapa: plataforma colaborativa para documentar y visualizar el estado de la infraestructura urbana en Querétaro, México. Información actualizada sobre mantenimiento vial e infraestructura pública.">
    <meta name="keywords" content="Querétaro, infraestructura urbana, mantenimiento vial, desarrollo urbano, mapeo colaborativo, documentación urbana, participación ciudadana, urbanización, planificación urbana, vialidades, reporte de baches">
    
    <!-- Schema.org markup for Google -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "Bachemapa",
      "description": "Plataforma para documentar y visualizar el estado de la infraestructura urbana en Querétaro",
      "url": "https://baches.qro.mx",
      "applicationCategory": "MapApplication",
      "operatingSystem": "All",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "MXN"
      }
    }
    </script>
    
    <!-- Robots meta tag -->
    <meta name="robots" content="index, follow">
    
    <!-- Language and geo tags -->
    <meta name="language" content="es">
    <meta name="geo.region" content="MX-QUE">
    <meta name="geo.placename" content="Querétaro">

    <!-- Autor de la página -->
    <meta name="author" content="Kernel Panic Room">

    <!-- Meta etiquetas para redes sociales -->
    <meta property="og:title" content="Bachemapa - Mapa interactivo de baches y otras cosas">
    <meta property="og:description" content="Bachemapa es una plataforma dedicada a documentar y reportar problemas con el desarrollo urbano en Querétaro, México. Encuentra y aporta información actualizada sobre baches, deficiencias en infraestructura y más.">
    <!--<meta property="og:image" content="URL_DE_LA_IMAGEN_DE_PREVISUALIZACIÓN">-->
    <meta property="og:url" content="https://baches.qro.mx">
    <meta property="og:type" content="website">

    <meta name="twitter:title" content="Bachemapa - Documentación de Problemas Urbanos en Querétaro">
    <meta name="twitter:description" content="Bachemapa es una plataforma dedicada a documentar y reportar problemas con el desarrollo urbano en Querétaro, México. Encuentra información actualizada sobre baches, deficiencias en infraestructura y más.">
    <meta name="twitter:site" content="@botkernel">

    <!-- Otros meta tags -->
    <link rel="canonical" href="https://baches.qro.mx">
    {% block head %}
    {% endblock %}

    <!-- Versión pública 0.1 -->
</head>
<body class="" style="color: black;">
    {% include 'nav.html' %}
    {% with messages = get_flashed_messages() %}
        {% if messages %}
        
        <div class="flashes">
            {% for message in messages %}
                <h3>{{message}}</h3>
            {% endfor %}
        </div>
        {% endif %}
    {% endwith %}
    <main class="container-fluid" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: static; display: block;">

        {% block content %}

        {% endblock %}
        <section id="pinner-modal" style="" hidden="true">
            {% if current_user.is_authenticated %}
                {% include 'add_pin.html' %}
        </section>
            {% else %}
            <div class="flashes">
                <h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
            </div>
        </section>
            {% endif %}

    </main>

</body>
<script>
    const observer = new MutationObserver((mutations) => {
        const element = document.getElementById('pinner-pop');
        if (element) {
            element.addEventListener('click', toggleSlide);
        }
    })
    const pinner_button_top = document.getElementById("pinner-top");
    const modal_stat = document.getElementById("pinner-modal");
    function toggleSlide() {
        if (modal_stat.hidden === true) {
            modal_stat.hidden = false;
        } else {modal_stat.hidden = true;}
    }
    pinner_button_top.addEventListener('click', toggleSlide);
    const cancel_add = document.getElementById("cancel-add");
    cancel_add.addEventListener('click', toggleSlide);
    observer.observe(document.body, { childList: true, subtree: true });
</script>
<script>
    // Wait until the entire page is fully loaded
window.addEventListener('load', function() {
    const link = document.querySelector("link[rel='stylesheet'][href='{{ url_for('static', filename='styles.css') }}']");
    if (link) {
        const newLink = link.cloneNode();
        link.remove();
        document.head.appendChild(newLink);
    }
});

</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const pinnerDesktop = document.getElementById("pinner-top-desktop");
        if (pinnerDesktop) {
            pinnerDesktop.addEventListener('click', toggleSlide);
        }
    });

</script>
<script>
    if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/static/service-worker.js')
        .then(function(registration) {
            console.log('Service Worker registered with scope:', registration.scope);
        }, function(err) {
            console.log('Service Worker registration failed:', err);
        });
    });
}
</script>
</html>
