{# Summary-card component (the wide ones at the top of the listings).

   Different shape from ``_stat_card``: same outer ``ui-summary-card``
   but with a ``ui-summary-band`` footer holding sub-values separated
   by ``·`` (per the cloud's _summary_cards.html grammar).

   Parameters:
     - label      (str) uppercase caption above the value
     - value      (str | safe HTML) main number / amount
     - subvalues  (list[str]) ``ui-summary-band`` items joined by ``·``
     - accent     (str) value colour: default | brand | emerald | rose
                                      | amber | teal
#}
{%- macro summary_card(label, value, subvalues=None, accent="default") -%}
  {%- set _accent_class = {
        "default": "",
        "brand":   "text-brand-500 dark:text-brand-300",
        "emerald": "text-emerald-600 dark:text-emerald-400",
        "rose":    "text-rose-600 dark:text-rose-400",
        "amber":   "text-amber-600 dark:text-amber-300",
        "teal":    "text-teal-700 dark:text-teal-300",
      }.get(accent, "") -%}
  <div class="ui-summary-card">
    <div class="flex items-start justify-between gap-3">
      <div>
        <p class="ui-card-label">{{ label }}</p>
        <p class="ui-summary-value{% if _accent_class %} {{ _accent_class }}{% endif %}">{{ value }}</p>
      </div>
    </div>
    {%- if subvalues %}
    <div class="ui-summary-band">
      {%- for sub in subvalues %}
      {%- if not loop.first %}
      <span class="ui-summary-subvalue">·</span>
      {%- endif %}
      <span class="ui-summary-subvalue">{{ sub }}</span>
      {%- endfor %}
    </div>
    {%- endif %}
  </div>
{%- endmacro %}