{% extends "base.html" %}

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

{% block content %}
  <section class="hero">
    <div>
      <p class="eyebrow">Today so far</p>
      <h1>Vet Temperatures</h1>
    </div>
    <a class="button" href="/reports">Make report</a>
  </section>

  {% if devices %}
    <section class="cards">
      {% for device in devices %}
        {% set reading = latest.get(device.id) %}
        {% set stat = stats.get(device.id) %}
        {% set collected_age = latest_relative.get(device.id) %}
        <a class="metric-card metric-link" href="/devices/{{ device.id }}">
          <div class="card-heading">
            <h2>{{ device.name }}</h2>
            <span>{{ device.device_type }}</span>
          </div>
          {% if reading %}
            <div class="reading-row">
              <strong>{{ "%.1f"|format(reading.temperature) if reading.temperature is not none else "n/a" }}&deg;C</strong>
              <span>{{ reading.humidity if reading.humidity is not none else "n/a" }}% RH</span>
            </div>
            <p class="muted">{{ collected_age or "n/a" }}</p>
            <dl class="mini-stats">
              <div>
                <dt>Day low</dt>
                <dd>{{ "%.1f"|format(stat.low) if stat else "n/a" }}&deg;C</dd>
              </div>
              <div>
                <dt>Day high</dt>
                <dd>{{ "%.1f"|format(stat.high) if stat else "n/a" }}&deg;C</dd>
              </div>
              <div>
                <dt>Battery</dt>
                <dd>{{ reading.battery if reading.battery is not none else "n/a" }}%</dd>
              </div>
            </dl>
          {% else %}
            <p class="empty">Waiting for the first reading.</p>
          {% endif %}
        </a>
      {% endfor %}
    </section>

    <section class="panel">
      <div class="panel-heading">
        <div>
          <h2>Day graph</h2>
          <p class="muted">Temperature readings from midnight to now.</p>
        </div>
      </div>
      <div class="chart-wrap">
        <canvas id="temperatureChart" height="360"></canvas>
      </div>
      <script id="chart-data" type="application/json">{{ chart_json|safe }}</script>
      <script src="{{ url_for('static', filename='chart.js') }}"></script>
    </section>
  {% else %}
    <section class="empty-state">
      <h2>No devices yet</h2>
      <p>Start the collector and it will populate device names from the SwitchBot API automatically.</p>
    </section>
  {% endif %}
{% endblock %}