<div class="row">
  <div class="col-md-6">
    <h5 class="mb-3">By Weather Condition</h5>
    {% if data.conditions %}
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Condition</th>
            <th class="text-end">Avg Quality</th>
            <th class="text-end">Check-ins</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in data.conditions %}
          <tr>
            <td>{{ entry.condition }}</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>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No weather-linked mood data found.</p>
    {% endif %}
  </div>
  <div class="col-md-6">
    <h5 class="mb-3">By Temperature Range</h5>
    {% if data.temp_ranges %}
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Temp Range</th>
            <th class="text-end">Avg Quality</th>
            <th class="text-end">Check-ins</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in data.temp_ranges %}
          <tr>
            <td>{{ entry.range }}</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>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No temperature-linked mood data found.</p>
    {% endif %}
  </div>
</div>
