{{ $listoryApi := getenv "HUGO_LISTORY_HOST" }}{{ $listoryToken := getenv
"HUGO_LISTORY_TOKEN" }} {{ $res := getJSON
"https://listory.apricote.de/api/v1/reports/top-genres?timePreset=last_180_days"
(dict "Authorization" (printf "Bearer %s" $listoryToken) ) }}

<ol>
  {{ range first 5 $res.items }}
  <li style="margin-bottom: 1em">
    <div style="display: flex">
      <div style="font-weight: 600; width: 80%">{{ .genre.name | title }}</div>
      <div style="width: 20%; text-align: right">
        {{ .count }}<img
          src="/listen.svg"
          alt="Listens"
          style="
            height: 1em;
            width: 1em;
            display: inline;
            margin: 0 0;
            margin-left: 0.2em;
            vertical-align: middle;
          "
        />
      </div>
    </div>
    <div style="font-size: 0.9em">
      {{ range first 3 .artists }}<code alt="foobar">{{.artist.name}}</code> {{
      end }}
    </div>
  </li>
  {{ end }}
</ol>