<div class="row">
  {% for category, info in data.items %}
  <div class="col-md-6 col-lg-4 mb-3">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">
          {% if category == "Trails" %}🥾
          {% elif category == "Books" %}📖
          {% elif category == "Foods" %}🍔
          {% elif category == "Drinks" %}🍺
          {% elif category == "Tasks" %}✅
          {% elif category == "Board Games" %}🎲
          {% elif category == "Video Games" %}🎮
          {% else %}🎧
          {% endif %}
          {{ category }}
        </h5>
        <p class="text-muted small">{{ info.total_anchor_sessions }} session{{ info.total_anchor_sessions|pluralize }}</p>
        {% if info.artists %}
        <table class="table table-sm table-borderless mb-0">
          <thead>
            <tr>
              <th>Artist</th>
              <th class="text-end">Plays</th>
            </tr>
          </thead>
          <tbody>
            {% for artist in info.artists %}
            <tr>
              <td>{{ artist.artist_name }}</td>
              <td class="text-end">{{ artist.count }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-muted mb-0">No concurrent listening data.</p>
        {% endif %}
      </div>
    </div>
  </div>
  {% empty %}
  <div class="col-12">
    <p class="text-muted">No concurrent listening data found.</p>
  </div>
  {% endfor %}
</div>
