<div class="row">
  {% if current_period_label %}
  <div class="col-12 mb-2">
    <small class="text-muted">Period: {{ current_period_label }}</small>
  </div>
  {% endif %}
  <div class="col-md-6 mb-3">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">🎵 Reading with Music</h5>
        {% if data.with_music %}
        <table class="table table-sm mb-0">
          <tr>
            <th>Avg session duration</th>
            <td>{{ data.with_music.avg_seconds }} seconds</td>
          </tr>
          <tr>
            <th>Total reading time</th>
            <td>{{ data.with_music.total_seconds }} seconds</td>
          </tr>
          <tr>
            <th>Reading sessions</th>
            <td>{{ data.with_music.sessions_count }}</td>
          </tr>
        </table>
        {% else %}
        <p class="text-muted mb-0">No data.</p>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-md-6 mb-3">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">🔇 Reading without Music</h5>
        {% if data.without_music %}
        <table class="table table-sm mb-0">
          <tr>
            <th>Avg session duration</th>
            <td>{{ data.without_music.avg_seconds }} seconds</td>
          </tr>
          <tr>
            <th>Total reading time</th>
            <td>{{ data.without_music.total_seconds }} seconds</td>
          </tr>
          <tr>
            <th>Reading sessions</th>
            <td>{{ data.without_music.sessions_count }}</td>
          </tr>
        </table>
        {% else %}
        <p class="text-muted mb-0">No data.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
