{{ define "title" }}
  Locations | {{ .Site.Title }}
{{ end }}

{{ define "main-class" }}--section location-map{{ end }}

{{ define "header-scripts" }}
    <!-- Leaflet -->
    <link rel="stylesheet" href="/css/leaflet/leaflet.css" />
    <link rel="stylesheet" href="/js/leaflet-fullscreen/leaflet.fullscreen.css" />
{{ end }}

{{ define "footer-scripts" }}
    <!-- Leaflet -->
    <script src="/js/leaflet/leaflet.js"></script>

    <!-- Leaflet Heat -->
    <script src="/js/leaflet-heat/leaflet-heat.js"></script>

    <!-- Leaflet Fullscreen -->
    <script src="/js/leaflet-fullscreen/leaflet.fullscreen.min.js"></script>

    <script>
        var map = L.map('map', {
            fullscreenControl: true
        }).setView([55, -3], 3);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

        {{- $locations := partialCached "util/get_location_leaf_nodes.html" $.Site.Data.locations -}}

        {{/*
        {{- range .Site.AllPages -}}
            {{- with .Params.locations -}}
                {{- range . -}}
                    {{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
                        L.marker([{{ .lat }}, {{ .lon }}]).addTo(map);
                {{- end -}}
                {{- end -}}
            {{- end -}}
        {{- end -}}
        */}}

        L.heatLayer(
            [
            {{- range .Site.AllPages -}}
                {{- with .Params.locations -}}
                    {{- range . -}}
                        {{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
                            [ {{ .lat }}, {{ .lon }} ],
                        {{- end -}}
                    {{- end -}}
                {{- end -}}
            {{- end -}}
            ],
            {
                minOpacity: 0.5,
                gradient: {0.1: 'blue', 0.3: 'lime', 0.8: 'orange', 1: 'red'}
            }
        ).addTo(map);
    </script>
{{ end }}

{{ define "main-header" }}
    <header class="site-content__header">
        <h1 class="page-title">{{ .Title | safeHTML }}.</h1>
        {{ .Content }}
    </header>
{{ end }}

{{ define "main-body" }}
<article class="site-content__body site-content__body--chart">
    <div id="map" style="width: 100%; height: 500px; margin: 0; display: block;"></div>

    {{- with ( partial "util/render_recursive_list.html" ( dict "sc" $ "pc" . "items" $.Site.Data.locations "schemaType" "Place" ) ) -}}
    <section style="grid-area: section-content">
        {{- . -}}
    </section>
    {{- end -}}
</article>
{{ end }}