{{ $js := resources.Get "js/build_heatmap.js" }}
{{ $p := .Site.Params.heatmap }}

<style>
:root {
  --color-empty: {{ $p.color_empty }};
  --color-low:   {{ $p.color_low }};
  --color-mid:   {{ $p.color_mid }};
  --color-high:  {{ $p.color_high }};
}
#heatmap { display: flex; justify-content: center; }
#heatmap text { font-family: inherit; fill: currentColor; }
#tooltip {
  position: fixed;
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
}
.hidden { display: none; }
</style>

<div id="heatmap"></div>
<script type="module">
    import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"

    const data = await fetch("/activity.json").then((r) => r.json());
    const counts = flattenData(data);
    const weeks = constructWeeks();
    const svg = render(weeks, counts);
    document.getElementById("heatmap").appendChild(svg);
    setupTooltips(svg);
</script>
<div id="tooltip" class="hidden"></div>
<div id="legend"></div>