{% extends "base.html" %}

{% block body %}
  <section class="hero {{ reading.value.class() }}">
    <div class="hero-head">
      {% let navbar_item = "sensor" %}
      {% include "navbar.html" %}
    </div>
    <div class="hero-body">
      <div class="container">
        <h1 class="title is-4" title='{{ "{:?}"|format(reading.value) }}'>
          {% if reading.value.is_inline() -%}
            {% let value = reading.value.as_ref() %}
            {% include "value.html" %}
          {% else -%}
            {{ sensor_id -}}
          {% endif -%}
        </h1>

        <h2 class="subtitle is-6">
          {% if reading.value.is_inline() -%}
            <span>{{ sensor_id -}}</span>
          {% endif -%}
          <span><i class="far fa-clock"></i></span>
          <span title="{{ reading.timestamp.to_string() }}">
            {# TODO: a custom filter. #}
            {{ reading.timestamp.format("%b %d, %H:%M:%S").to_string() }}
          </span>
        </h2>
      </div>
    </div>
  </section>

  {% if reading.value.is_inline() %}
  {% else %}
    <section class="section">
      <div class="container">
        <div class="message">
          <div class="message-body">
            {% let value = reading.value.as_ref() %}
            {% include "value.html" %}
          </div>
        </div>
      </div>
    </section>
  {% endif %}

  <section class="section">
    <div class="container">
      <h3 class="title is-5">Latest reading</h3>
      <h4 class="subtitle is-7">This is stored in the database</h4>
      <div class="message">
        <div class="message-body">
          <pre><code>{{ "{:#?}"|format(reading) }}</code></pre>
        </div>
      </div>
    </div>
  </section>
{% endblock %}