{{- $choices := $.Page.Param "image.choices" }}
{{- if not $choices }}
{{- errorf "missing value for 'image.choices': %s" .Position }}
{{- end }}
{{- $alt := default "random image" ($.Page.Param "image.alt") }}
{{- $id := sha256 (index (seq 999 | shuffle) 0) }}
<p id="{{ $id }}">
  <img class="centered pad-vertical" >
</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const container = document.getElementById("{{ $id }}");
  const choices = JSON.parse(`{{ $choices }}`);
  if (!container || !choices) { return; }
  const img = document.createElement("img");
  img.alt = "{{ $alt }}";
  img.classList.add("centered", "pad-vertical");
  img.src = choices[Math.floor(Math.random() * choices.length)];
  container.appendChild(img);
})
</script>