<div class="row">
  <div class="col-12">
    {% if data.total and data.total > 0 %}
    <div class="mb-4">
      {% for slug, info in data.categories.items %}
        {% if forloop.first %}
        <div class="card text-center border-0 bg-light mb-3">
          <div class="card-body py-4">
            {% if slug == "early_bird" %}
              <div class="display-1">🌅</div>
            {% elif slug == "day_jay" %}
              <div class="display-1">☀️</div>
            {% else %}
              <div class="display-1">🌙</div>
            {% endif %}
            <h3 class="mt-2">{{ info.label }}</h3>
            <div class="display-4 fw-bold">{{ info.pct }}%</div>
            <div class="text-muted">{{ info.count }} scrobbles</div>
          </div>
        </div>
        {% else %}
        <div class="card text-center border-0 bg-light mb-2">
          <div class="card-body py-2 d-flex align-items-center justify-content-between px-4">
            <div class="d-flex align-items-center gap-3">
              {% if slug == "early_bird" %}
                <span style="font-size:1.5rem;">🌅</span>
              {% elif slug == "day_jay" %}
                <span style="font-size:1.5rem;">☀️</span>
              {% else %}
                <span style="font-size:1.5rem;">🌙</span>
              {% endif %}
              <h5 class="mb-0">{{ info.label }}</h5>
            </div>
            <div class="text-end">
              <span class="fs-4 fw-bold">{{ info.pct }}%</span>
              <br><small class="text-muted">{{ info.count }} scrobbles</small>
            </div>
          </div>
        </div>
        {% endif %}
      {% endfor %}
      <div class="text-center text-muted small mt-2">Total: {{ data.total }} scrobbles across Books, Trails, Birding Locations, and Board Games</div>
    </div>

    <h5>By Media Type</h5>
    {% for mt, mt_data in data.by_media_type.items %}
    <h6 class="mt-3">{{ mt }}</h6>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Category</th>
            <th class="text-end">Scrobbles</th>
            <th class="text-end">%</th>
          </tr>
        </thead>
        <tbody>
          {% for slug, info in mt_data.categories.items %}
          <tr>
            <td>{{ info.label }}</td>
            <td class="text-end">{{ info.count }}</td>
            <td class="text-end">{{ info.pct }}%</td>
          </tr>
          {% endfor %}
          <tr class="table-secondary">
            <td><strong>Total</strong></td>
            <td class="text-end"><strong>{{ mt_data.total }}</strong></td>
            <td class="text-end"></td>
          </tr>
        </tbody>
      </table>
    </div>
    {% endfor %}

    {% else %}
    <p class="text-muted">No data found for Books, Trails, Birding Locations, or Board Games in this period.</p>
    {% endif %}
  </div>
</div>
