{#- chirp-ui: Metric grid/card
    Overview/KPI wrappers for dashboard-style pages.
    metric_card forwards attrs / attrs_map to the outer card or <a> (e.g. id for HTMX targets).
-#}
{% from "chirpui/layout.html" import grid %}
{% from "chirpui/card.html" import card %}
{% from "chirpui/stat.html" import stat %}

{% def metric_grid(cols=3, gap="md", cls="") %}
{% call grid(cols=cols, gap=gap, cls="chirpui-metric-grid" ~ (" " ~ cls if cls else "")) %}
{{ caller() }}
{% end %}
{% end %}

{% def metric_card(value, label, icon=none, trend=none, trend_direction="", hint=none, href=none, icon_bg="", footer_label=none, footer_href=none, cls="", attrs="", attrs_map=none) %}
{% if href %}
<a href="{{ href }}" class="chirpui-card chirpui-card--link chirpui-metric-card{{ " " ~ cls if cls else "" }}"{{ attrs | html_attrs }}{{ attrs_map | html_attrs }}>
    <div class="chirpui-card__body">
        <div class="chirpui-metric-card__top">
            {% if icon and icon_bg %}
            <span class="chirpui-metric-card__icon-badge chirpui-metric-card__icon-badge--{{ icon_bg }}">{{ icon | icon }}</span>
            {% end %}
            <div class="chirpui-metric-card__values">
                {{ stat(value=value, label=label, icon=icon if not icon_bg else none, cls="chirpui-metric-card__stat") }}
            </div>
        </div>
        {% if trend %}
        <span class="chirpui-metric-card__trend chirpui-metric-card__trend--{{ trend_direction if trend_direction else "neutral" }}">
            {% if trend_direction == "up" %}<span class="chirpui-metric-card__trend-arrow" aria-hidden="true">↑</span>{% elif trend_direction == "down" %}<span class="chirpui-metric-card__trend-arrow" aria-hidden="true">↓</span>{% end %}
            {{ trend }}
        </span>
        {% end %}
        {% if hint %}<p class="chirpui-metric-card__hint">{{ hint }}</p>{% endif %}
    </div>
</a>
{% else %}
{% call card(cls="chirpui-metric-card" ~ (" " ~ cls if cls else ""), attrs=attrs, attrs_map=attrs_map) %}
<div class="chirpui-metric-card__top">
    {% if icon and icon_bg %}
    <span class="chirpui-metric-card__icon-badge chirpui-metric-card__icon-badge--{{ icon_bg }}">{{ icon | icon }}</span>
    {% end %}
    <div class="chirpui-metric-card__values">
        {{ stat(value=value, label=label, icon=icon if not icon_bg else none, cls="chirpui-metric-card__stat") }}
    </div>
</div>
{% if trend %}
<span class="chirpui-metric-card__trend chirpui-metric-card__trend--{{ trend_direction if trend_direction else "neutral" }}">
    {% if trend_direction == "up" %}<span class="chirpui-metric-card__trend-arrow" aria-hidden="true">↑</span>{% elif trend_direction == "down" %}<span class="chirpui-metric-card__trend-arrow" aria-hidden="true">↓</span>{% end %}
    {{ trend }}
</span>
{% end %}
{% if hint %}<p class="chirpui-metric-card__hint">{{ hint }}</p>{% endif %}
{% if footer_label %}
<a href="{{ footer_href or "#" }}" class="chirpui-metric-card__footer">{{ footer_label }} →</a>
{% end %}
{% end %}
{% endif %}
{% end %}