<div class="row">
  <div class="col-md-6">
    <h5 class="mb-3">By Hour of Day</h5>
    {% if data.hours %}
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Hour</th>
            <th class="text-end">Avg Quality</th>
            <th class="text-end">Check-ins</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in data.hours %}
          {% if entry.count > 0 %}
          <tr>
            <td>
              {% if entry.hour == 0 %}
              12 AM
              {% elif entry.hour < 12 %}
              {{ entry.hour }} AM
              {% elif entry.hour == 12 %}
              12 PM
              {% else %}
              {{ entry.hour|add:"-12" }} PM
              {% endif %}
            </td>
            <td class="text-end">
              <span class="{% if entry.avg_quality >= 5 %}text-success{% elif entry.avg_quality >= 4 %}text-info{% elif entry.avg_quality >= 3 %}text-warning{% else %}text-danger{% endif %}">
                {{ entry.avg_quality }}
              </span>
            </td>
            <td class="text-end">{{ entry.count }}</td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No hourly data.</p>
    {% endif %}
  </div>
  <div class="col-md-6">
    <h5 class="mb-3">By Day of Week</h5>
    {% if data.days %}
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Day</th>
            <th class="text-end">Avg Quality</th>
            <th class="text-end">Check-ins</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in data.days %}
          {% if entry.count > 0 %}
          <tr>
            <td>{{ entry.day_name }}</td>
            <td class="text-end">
              <span class="{% if entry.avg_quality >= 5 %}text-success{% elif entry.avg_quality >= 4 %}text-info{% elif entry.avg_quality >= 3 %}text-warning{% else %}text-danger{% endif %}">
                {{ entry.avg_quality }}
              </span>
            </td>
            <td class="text-end">{{ entry.count }}</td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No daily data.</p>
    {% endif %}
  </div>
</div>
