{% macro track_block(track, is_active=false) %}
  <div class="block track{% if is_active %} active{% endif %}">
    {% if track.cover_url %}
      <img src="{{ track.cover_url }}"/>
    {% endif %}
    <div>
      <p><b>{{ track.artist_name }}</b></p>
      <p>{{ track.track_name }}</p>
      {% if not is_active %}
        <p
          x-data="rtime({{ track.listened_at }})"
          x-text="`Listened ${timeString}`"
          :class="textColorClass"
        ></p>
      {% endif %}
    </div>
  </div>
{% endmacro %}

<div
  class="block"
  hx-get="/m/listenbrainz"
  hx-trigger="every 15s"
  hx-swap="outerHTML"
  hx-headers='{
    "If-Modified-Since": {{ lb.last_updated | int }},
    "If-None-Match": "{{ lb.etag }}"
  }'
>
  <h2><a href="https://listenbrainz.org/user/risdeveau/">Listenbrainz</a></h2>
  {% if lb.caches.now.data and lb.caches.now.data.listens.0 %}
    {{ track_block(lb.caches.now.data.listens.0, is_active=true) }}
  {% endif %}
  {% if lb.caches.listens.data and lb.caches.listens.data.listens %}
    {% for track in lb.caches.listens.data.listens %}
      {{ track_block(track) }}
    {% endfor %}
  {% endif %}
</div>