{{ with .Get "geoJson" }}
{{ $geoJson := . }}
{{ $data := getJSON $geoJson }}
<div>
    <!-- Leaflet's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
        crossorigin="" />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
        crossorigin=""></script>

    <div id="map"></div>

    <style>
        #map {
            width: 100%;
            padding-bottom: 70%;
            /* height: 500px; */
        }

        .fa-icon-marker {
            text-align: center;
            width: 100%;
        }

        .download-track {
            background-color: #e1e1e1;
            text-align: center;
            margin-bottom: 25px;
            border-radius: 0 0 10px 10px;
            cursor: pointer;
        }
    </style>

    <script>
        // Utils
        function properties(feature, layer) {
            // Iterate over the properties keys
            // NOTE: there is no way for javascipt to preserve the order of de declaration of object values.
            // JS will just print in alfabetical order (so if you wanna order it name the keys in  alfabetical order like 'a', 'b', 'c')
            const objectOrder = {
                ...feature.properties,
                "AgroupName": feature.properties.groupName,
                "BlistOfNames": feature.properties.listOfNames,
            }
            if (objectOrder?.groupName) { delete objectOrder.groupName }
            if (objectOrder?.listOfNames) { delete objectOrder.listOfNames }

            const newObjectOrder = Object.keys(objectOrder).sort()

            const textOutput = newObjectOrder.map(function (key, index) {
                console.log(key, objectOrder[key])
                if (!objectOrder[key]) return
                if (key === 'AgroupName') {
                    return '<h1>' + objectOrder[key] + '</h1>'
                } else if (key === 'BlistOfNames') {
                    return '<div style="padding-bottom: 12px"><span><strong>Members:</strong></span><br>' + objectOrder[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('') + '</div>'
                } else if (key === 'iframe') {
                    return '<iframe src="' + objectOrder[key] + '" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="width: 100%; margin-top: 12px; margin-bottom: 12px;" frameborder="0"></iframe>'
                } else if (key === 'video') {
                    return '<video width="320" controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></video>'
                } else if (key === 'audio') {
                    return '<audio controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></audio>'
                } else if (key === 'website') {
                    return '<p><strong>website: </strong><a href="'+ objectOrder[key] + '">' + objectOrder[key] + '</a></p>'
                } else {
                    return '<p>' + objectOrder[key] + '</p>'
                }
            });

            layer.bindPopup(textOutput.join(''), { maxHeight: 500, innerWidth: 400 })
        }

        var map = L.map('map').setView([-7.2344, 108.3211], 3);

        window.addEventListener('load', (event) => {
            map.invalidateSize();
        });

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

        // Add markers
        L.geoJSON({{ $data }}, {
            onEachFeature: properties
        }).addTo(map);

    </script>

</div>
{{ end }}