<!DOCTYPE html>
<html data-theme="light" lang="en" style="background-color: rgb(205, 243, 148); color: black;">
<head>
    <meta charset="UTF-8">
    <title>Interactive Map</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='pico.amber.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.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <!--<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>-->


    <!--<link rel="stylesheet" href="{{ url_for('static', filename='leaflet.css') }}">
    <script src="{{ url_for('static', filename='leaflet.js') }}"></script>-->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">

</head>
<body style="background-color: rgb(205, 243, 148, 0.5); color: black;">
    <nav style="height: 7vh;">
        <ul>
            <a href="/"><li><h2>El Bachemapa</h2></li></a>
        </ul>
        
        
        <ul>
            
            <li><button id="pinner-top">Agregar</button></li>
            <li><button><a href="/quienes">Quienes somos</a></button></li>
            {% if current_user.is_authenticated %}
            <li><button><a href="/dashboard">Perfil</a></button></li>   
            <li><button><a href="/logout">Cerrar sesión</a></button></li>
            {% endif %}
        </ul>
    </nav>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
        
        <ul class="flashes">
            {% for message in messages %}
                <li>{{message}}</li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endwith %}
    <main class="" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: absolute;">

{% block content %}

{% endblock %}
<div id="pinner-modal" style="z-index:999;position:absolute;top:7vh" hidden="true">
    {% if current_user.is_authenticated %}
        {% include 'add_pin.html' %}
    {% else %}
        <div style="z-index: 9000; background-color: rgb(205, 243, 148, 0.7); position: relative; top: inherit; left: 100%;">
            <h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
        </div>
    {% endif %}
</div>
</main>

</body>
<script>
        // pin button logic
    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");
    //var pinner_button_pop = document.getElementById("pinner-pop");
    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);
    observer.observe(document.body, { childList: true, subtree: true });
</script>
</html>
