{#
  One number, how it moved, and the window behind it as a sparkline.

  The value uses the font's proportional figures rather than tabular ones: a
  large standalone number set in tabular figures gives every digit the width of
  a zero, which reads as loose at this size. Tabular figures belong in columns.
#}
{% set card = card.context %}
{% set series = card.series %}

<a class="ff-card ff-metric" {% if card.url %}href="{{ card.url }}"{% endif %}>
  <div class="ff-metric__head">
    {% if card.icon %}
      <span class="ff-metric__icon" aria-hidden="true">{{ ff_icon(card.icon, size=16) }}</span>
    {% endif %}
    <span class="ff-metric__label">{{ _(card.title) }}</span>
  </div>

  <span class="ff-metric__value">{{ series.total }}</span>
  {% include "dashboard/_delta.html" %}

  {# A sparkline of nothing is a flat rule, which is exactly what a chart that
     failed to draw looks like. Said in words instead. #}
  {% if series.empty %}
    <span class="ff-metric__quiet">
      {{ _("Nothing in the last {days} days", days=series.bars|length) }}
    </span>
  {% else %}
    <svg
      class="ff-spark"
      viewBox="0 0 100 100"
      preserveAspectRatio="none"
      role="img"
      aria-label="{{ _("Last {days} days", days=series.bars|length) }}"
      focusable="false"
    >
      <path class="ff-plot__area" d="{{ series.area }}" />
      <polyline class="ff-plot__line" points="{{ series.line }}" />
    </svg>
  {% endif %}
</a>