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

<style>
:root {
  --color-empty: {{ $p.color_empty_dark }};
  --color-l1: {{ $p.color_max }};
  --color-l2: {{ $p.color_high }};
  --color-l3: {{ $p.color_mid }};
  --color-l4: {{ $p.color_low }};
}
@media (prefers-color-scheme: light) {
  :root {
    --color-empty: {{ $p.color_empty_light }};
    --color-l1: {{ $p.color_low }};
    --color-l2: {{ $p.color_mid }};
    --color-l3: {{ $p.color_high }};
    --color-l4: {{ $p.color_max }};
  }
}
#heatmap { overflow-x: auto; }
#heatmap text { font-family: inherit; fill: currentColor; }
#heatmap-caption {font-size: 0.8em; text-align: center; margin-top: 0px;}
#heatmap-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75em;
  margin-top: 4px;
}
#heatmap-legend { display: flex; align-items: center; gap: 4px; }
#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, totalCount, renderLegend} 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);

    document.getElementById("contribution-count").textContent =
      `${totalCount(counts)} contributions in the last year`;

    const legendEl = document.getElementById("heatmap-legend");
    legendEl.appendChild(document.createTextNode("Less"));
    legendEl.appendChild(renderLegend());
    legendEl.appendChild(document.createTextNode("More"));
</script>

<div id="heatmap-footer">
  <span id="contribution-count"></span>
  <span id="heatmap-legend"></span>
</div>

{{ with $p.caption }}
<p id="heatmap-caption"> {{ . | safeHTML }} </p>
{{ end }}
<div id="tooltip" class="hidden"></div>