{# alerts/_metric_preview.html — what the chosen metric reads (#5475), so a
   threshold is set against real numbers: now, and the last day's hourly
   averages with the lowest and highest reading. A rule covering hosts
   previews on the host picked above it, or none. #}
{% if preview %}
<div class="metric-preview">
  <span>Now <strong>{{ metric_value(metric, preview.now) }}</strong>
    <span class="tone-dim" title="{{ preview.at|when }}">{{ preview.at|ago }}</span></span>
  {% if preview.series|length > 1 %}
  <span class="metric-preview-day">
    <span class="tone-dim">last 24 h</span> {{ metric_value(metric, preview.low) }} – {{ metric_value(metric, preview.high) }}
    <span class="metric-preview-spark" aria-hidden="true">{{ preview.spark|safe }}</span>
  </span>
  {% endif %}
</div>
{% elif metric and resource %}
<p class="field-hint">No reading of this yet from {{ resource }}.</p>
{% endif %}