<article class="message is-light gia-behavior-summary-card">
  <div class="message-body">
    <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">
      {{ card.state_label }} · {{ card.group|upper }}
    </p>
    <div class="is-flex is-align-items-center is-justify-content-space-between mb-2">
      <p class="title is-6 mb-0">
        <span class="icon is-small mr-1"><i class="{{ card.icon }}"></i></span>
        <span>{{ card.title }}</span>
      </p>
      <span class="tag is-light gia-badge">{{ card.current_value_label }}</span>
    </div>
    <p class="is-size-7 mb-1">{{ card.calculation }}</p>
    {% if card.delta_label %}
      <p class="is-size-7 has-text-grey">Latest shift: {{ card.delta_label }}</p>
    {% endif %}
  </div>
</article>
