{% extends "base.html" %}

{% block title %}Reports - SwitchBot Temps{% endblock %}

{% block content %}
  <section class="hero">
    <div>
      <p class="eyebrow">Reports</p>
      <h1>Build a temperature report</h1>
      <p class="muted">Choose a date range and export the summary as CSV.</p>
    </div>
  </section>

  <form class="report-form" method="get" action="/reports">
    <label>
      Start
      <input type="date" name="start" value="{{ start }}">
    </label>
    <label>
      End
      <input type="date" name="end" value="{{ end }}">
    </label>
    <label>
      Device
      <select name="device_id">
        <option value="">All devices</option>
        {% for device in devices %}
          <option value="{{ device.id }}" {% if device.id == device_id %}selected{% endif %}>{{ device.name }}</option>
        {% endfor %}
      </select>
    </label>
    <button class="button" type="submit">Run report</button>
    <a class="button secondary" href="/reports.csv?start={{ start }}&end={{ end }}&device_id={{ device_id }}">Download CSV</a>
  </form>

  <section class="panel">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Device</th>
            <th>Samples</th>
            <th>Low temp</th>
            <th>High temp</th>
            <th>Avg temp</th>
            <th>Low RH</th>
            <th>High RH</th>
            <th>Avg RH</th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
            <tr>
              <td>{{ row.device_name }}</td>
              <td>{{ row.samples }}</td>
              <td>{{ row.low_temp if row.low_temp is not none else "n/a" }}&deg;C</td>
              <td>{{ row.high_temp if row.high_temp is not none else "n/a" }}&deg;C</td>
              <td>{{ row.avg_temp if row.avg_temp is not none else "n/a" }}&deg;C</td>
              <td>{{ row.low_humidity if row.low_humidity is not none else "n/a" }}%</td>
              <td>{{ row.high_humidity if row.high_humidity is not none else "n/a" }}%</td>
              <td>{{ row.avg_humidity if row.avg_humidity is not none else "n/a" }}%</td>
            </tr>
          {% else %}
            <tr>
              <td colspan="8" class="empty">No readings found for this range.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
{% endblock %}