<div class="row">
  {% if data.trails %}
  <div class="col-md-6 mb-3">
    <h4>🥾 While on Trails</h4>
    {% for trail in data.trails %}
    <div class="card mb-2">
      <div class="card-body py-2">
        <h6 class="card-title mb-1">
          {% if trail.uuid %}
          <a href="{% url 'trails:trail_detail' trail.uuid %}">{{ trail.name }}</a>
          {% else %}
          {{ trail.name }}
          {% endif %}
          <small class="text-muted">({{ trail.total_sessions }} sessions)</small>
        </h6>
        {% if trail.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 trail.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>
    {% empty %}
    <p class="text-muted">No concurrent listening data for trails.</p>
    {% endfor %}
  </div>
  {% endif %}

  {% if data.locations %}
  <div class="col-md-6 mb-3">
    <h4>📍 While at Locations</h4>
    {% for loc in data.locations %}
    <div class="card mb-2">
      <div class="card-body py-2">
        <h6 class="card-title mb-1">
          {% if loc.uuid %}
          <a href="{% url 'locations:geolocation_detail' loc.uuid %}">{{ loc.name }}</a>
          {% else %}
          {{ loc.name }}
          {% endif %}
          <small class="text-muted">({{ loc.total_sessions }} sessions)</small>
        </h6>
        {% if loc.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 loc.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>
    {% empty %}
    <p class="text-muted">No concurrent listening data for locations.</p>
    {% endfor %}
  </div>
  {% endif %}
</div>

{% if not data.trails and not data.locations %}
<p class="text-muted">No concurrent listening data found.</p>
{% endif %}
