{#
  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" %}

  <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>
</a>