<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/dropdown.css">
    <link rel="stylesheet" href="css/arno-web-styles.css">
    <link rel="stylesheet" href="css/map-styles.css">
    <link rel="stylesheet" href="css/tippy/translucent-purple.css">
    <title>EU Maps</title>
    <script src="https://unpkg.com/eurostat-map"></script>
</head>

<body class="map-body">
    <span class="map-buttons-container">
        <button class="c-pink-btn-sm">Filter by unit</button>
        <button class="pink-btn-sm" onclick="gototoc()">Go back to TOC</button>
        </span>
        <template id="example">
            <div class="c-user-menu">
              <strong class="c-user-menu__user-name">Choose a value to display</strong>
              {% for unit in units %}
                <button class="c-user-menu__menu-btn" onclick="filterbyunit('{{ unit }}')">{{ unit_names[unit] }}</button>
              {% endfor %}
            </div>
          </template>
        
    <span class="map-container" id="map-canvas">
        {% for unit in units %}
        <svg id="{{ unit }}-map" class="map-svg"></svg>
        {% endfor %}
    </span>
    
    <script>

        const mapCanvas = document.getElementById("map-canvas");
        var mapWidth = mapCanvas.getBoundingClientRect().width;
        var mapHeight = mapCanvas.getBoundingClientRect().height;
        let maps = {}

        {% for unit in units %}

        var map = eurostatmap.map("ch")
            .svgId("{{ unit }}-map")
            .scale("20M")
            .nutsLvl({{ nuts_lvl }})
            .width(mapWidth)
            .height(mapHeight)
            .classifMethod("quantile")
            .tooltipShowFlags(true)
            .legend({ noData: false });

        map.statData().setData({

        {% for geo, val in data[unit].items() %}

            "{{ geo }}": {{ val }},

        {% endfor %}

        });

        map.seaFillStyle("#a697d249");
        map.build();

        maps["{{ unit }}"] = map;
        {% endfor %}
    </script>

    
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
    <script>
        function gototoc(){
            window.location.href = "/toc";
        }

        // dropdown menu using tippy
        function hideObject(object){
            object.style.display = "none";
        }

        function showObject(object){
            object.style.display = "block";
        }

        function filterbyunit(unit){
            units = {{ units|tojson }};
            console.log(units);
            for (unitCode of units){
        
                var svgMap = document.getElementById(unitCode + "-map");
                if (unitCode != unit){
                    console.log("hiding " + unitCode);
                    hideObject(svgMap);
                }
                else{
                    console.log("showing " + unitCode);
                    showObject(svgMap);
                }
            }
        }
    
    document.addEventListener('DOMContentLoaded', function() {

    const template = document.getElementById('example')
    const container = document.createElement('div')
    container.appendChild(document.importNode(template.content, true))

    tippy('.c-pink-btn-sm', {
        content: container.innerHTML,
        trigger: 'mouseenter', // mouseenter, click, focus; manual.
        placement: 'bottom-end',
        arrow: true,
        theme: 'translucent-purple',
        // arrowType: 'round',
        animation: 'scale',
        duration: [250, 200],
        distance: 12,
        interactive: true,
        showOnInit: true, // to ease styling
        allowHTML: true,
        });
    });
    </script>
</body>
</html>