<div class="row">
  {% if data.books %}
  {% for book in data.books %}
  <div class="col-md-6 mb-3">
    <div class="card">
      <div class="card-body py-2">
        <h6 class="card-title mb-1">
          {% if book.book_uuid %}
          <a href="{% url 'books:book_detail' book.book_uuid %}">{{ book.book_title }}</a>
          {% else %}
          {{ book.book_title }}
          {% endif %}
          <small class="text-muted">({{ book.total_sessions }} listening sessions)</small>
        </h6>
        {% if book.tracks %}
        <table class="table table-sm table-borderless mb-0">
          <thead>
            <tr>
              <th>Track</th>
              <th>Artist</th>
              <th class="text-end">Plays</th>
            </tr>
          </thead>
          <tbody>
            {% for t in book.tracks %}
            <tr>
              <td>{% if t.track_uuid %}<a href="{% url 'music:track_detail' t.track_uuid %}">{{ t.track_name }}</a>{% else %}{{ t.track_name }}{% endif %}</td>
              <td>{{ t.artist_name }}</td>
              <td class="text-end">{{ t.count }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
  {% else %}
  <p class="text-muted">No concurrent reading data found.</p>
  {% endif %}
</div>
