{#- chirp-ui: Card component
    Headless card with optional header, footer, collapsible, and variants.

    Named slots: header_actions, media, body_actions (for list cards), default (body).
    Link variants also expose header_badge, header_subtitle, top_meta, and footer.

    Usage:
        from "chirpui/card.html" import card

        call card(title="My Card")
            <p>Card body content.</p>
        end

        call card(title="Settings", icon="⚙")
            {% slot header_actions %}<button>⋯</button>{% end %}
            <p>Body content.</p>
        end

        call card(title="Feature", variant="feature")
            {% slot media %}<img src="..." alt="...">{% end %}
            <p>Body content.</p>
        end

        call card(title="Usage", attrs_map={"id": "usage-widget"})
            <p>Stable id on the outer article for hx-target="#usage-widget".</p>
        end
-#}

{% def card(title=none, subtitle=none, footer=none, collapsible=false, open=false, variant="", icon=none, border_variant="", header_variant="", cls="", hoverable=false, attrs="", attrs_map=none) %}
{% set variant_class = " chirpui-card--" ~ variant if variant else "" %}
{% set border_class = " chirpui-card--gradient-border" if border_variant == "gradient" else "" %}
{% set header_class = " chirpui-card--gradient-header" if header_variant == "gradient" else "" %}
{% set hover_class = " chirpui-card--hoverable" if hoverable else "" %}
{% if collapsible %}
<details class="chirpui-card chirpui-card--collapsible{{ variant_class }}{{ border_class }}{{ header_class }}{{ hover_class }}{{ " " ~ cls if cls else "" }}"{% if open %} open{% end %}{{ attrs | html_attrs }}{{ attrs_map | html_attrs }}>
    {% if title %}
        <summary class="chirpui-card__header">
            {% if icon %}<span class="chirpui-card__icon">{{ icon | icon }}</span>{% end %}
            <div class="chirpui-card__header-content">
                <span class="chirpui-card__title">{{ title }}</span>
                {% if subtitle %}<p class="chirpui-text-muted chirpui-font-sm">{{ subtitle }}</p>{% end %}
            </div>
            <div class="chirpui-card__header-actions">{% slot header_actions %}</div>
        </summary>
    {% end %}
    <div class="chirpui-card__media">{% slot media %}</div>
    <div class="chirpui-card__body">
        <div class="chirpui-card__body-content">{% slot %}</div>
        <div class="chirpui-card__body-actions">{% slot body_actions %}</div>
    </div>
    {% if footer %}
        <footer class="chirpui-card__footer">{{ footer }}</footer>
    {% end %}
</details>
{% else %}
<article class="chirpui-card{{ variant_class }}{{ border_class }}{{ header_class }}{{ hover_class }}{{ " " ~ cls if cls else "" }}"{{ attrs | html_attrs }}{{ attrs_map | html_attrs }}>
    {% if title %}
        <header class="chirpui-card__header">
            {% if icon %}<span class="chirpui-card__icon">{{ icon | icon }}</span>{% end %}
            <div class="chirpui-card__header-content">
                <span class="chirpui-card__title">{{ title }}</span>
                {% if subtitle %}<p class="chirpui-text-muted chirpui-font-sm">{{ subtitle }}</p>{% end %}
            </div>
            <div class="chirpui-card__header-actions">{% slot header_actions %}</div>
        </header>
    {% end %}
    <div class="chirpui-card__media">{% slot media %}</div>
    <div class="chirpui-card__body">
        <div class="chirpui-card__body-content">{% slot %}</div>
        <div class="chirpui-card__body-actions">{% slot body_actions %}</div>
    </div>
    {% if footer %}
        <footer class="chirpui-card__footer">{{ footer }}</footer>
    {% end %}
</article>
{% end %}
{% end %}

{% def card_header(title, subtitle=none, icon=none, cls="") %}
<header class="chirpui-card__header{{ " " ~ cls if cls else "" }}">
    {% if icon %}<span class="chirpui-card__icon">{{ icon | icon }}</span>{% end %}
    <div class="chirpui-card__header-content">
        <span class="chirpui-card__title">{{ title }}</span>
        {% if subtitle %}<p class="chirpui-text-muted chirpui-font-sm">{{ subtitle }}</p>{% end %}
    </div>
    <div class="chirpui-card__header-actions">
        {% slot %}
    </div>
</header>
{% end %}

{% def card_media(cls="") %}
<div class="chirpui-card__media{{ " " ~ cls if cls else "" }}">
    {% slot %}
</div>
{% end %}

{# Link-styled card for navigation/index grids.
   Named slots: header_badge (top-left chip/badge), header_subtitle (beneath title, e.g. aliases),
   footer (below hr, e.g. tags), default (body). #}
{% def card_link(href, title, cls="") %}
<a href="{{ href }}" class="chirpui-card chirpui-card--link{{ " " ~ cls if cls else "" }}">
    <header class="chirpui-card__header">
        <div class="chirpui-card__header-badges">{% slot header_badge %}</div>
        <div class="chirpui-card__header-content">
            <span class="chirpui-card__title">{{ title }}</span>
            <div class="chirpui-card__header-subtitle">{% slot header_subtitle %}</div>
        </div>
    </header>
    <div class="chirpui-card__body">
        {% slot %}
    </div>
    <div class="chirpui-card__footer-wrap">{% slot footer %}</div>
</a>
{% end %}

{# Partially linked card for list grids with independent source/footer links.
   Named slots: top_meta (above main link), header_badge, header_subtitle, footer, default (body). #}
{% def card_main_link(href, title, cls="") %}
<article class="chirpui-card chirpui-card--linked{{ " " ~ cls if cls else "" }}">
    <div class="chirpui-card__top-meta">{% slot top_meta %}</div>
    <a href="{{ href }}" class="chirpui-card__main-link">
        <header class="chirpui-card__header">
            <div class="chirpui-card__header-badges">{% slot header_badge %}</div>
            <div class="chirpui-card__header-content">
                <span class="chirpui-card__title">{{ title }}</span>
                <div class="chirpui-card__header-subtitle">{% slot header_subtitle %}</div>
            </div>
        </header>
        <div class="chirpui-card__body">
            {% slot %}
        </div>
    </a>
    <div class="chirpui-card__footer-wrap">{% slot footer %}</div>
</article>
{% end %}

{# Opinionated list/index card for app resources.
   Named slots: badges, subtitle, footer, default (body extras).
   link_mode="all" uses a whole-card link; link_mode="main" keeps top/footer content independently interactive. #}
{% def resource_card(href, title, description=none, top_meta=none, top_meta_href=none, top_meta_title=none, cls="", link_mode="all") %}
{% set link_mode = link_mode | validate_variant(("all", "main"), "all") %}
{% if link_mode == "main" %}
<article class="chirpui-card chirpui-card--linked chirpui-resource-card{{ " " ~ cls if cls else "" }}">
    {% if top_meta %}
    <div class="chirpui-card__top-meta">
        {% if top_meta_href %}
        <a href="{{ top_meta_href }}" class="chirpui-font-xs chirpui-text-muted chirpui-font-mono"{% if top_meta_title %} title="{{ top_meta_title }}"{% endif %}>{{ top_meta }}</a>
        {% else %}
        <span class="chirpui-font-xs chirpui-text-muted chirpui-font-mono">{{ top_meta }}</span>
        {% endif %}
    </div>
    {% endif %}
    <a href="{{ href }}" class="chirpui-card__main-link">
        <header class="chirpui-card__header">
            <div class="chirpui-card__header-badges">{% slot badges %}</div>
            <div class="chirpui-card__header-content">
                <span class="chirpui-card__title">{{ title }}</span>
                <div class="chirpui-card__header-subtitle">{% slot subtitle %}</div>
            </div>
        </header>
        <div class="chirpui-card__body">
            {% if description %}<p class="chirpui-text-muted chirpui-font-sm chirpui-resource-card__description">{{ description }}</p>{% endif %}
            {% slot %}
        </div>
    </a>
    <div class="chirpui-card__footer-wrap">{% slot footer %}</div>
</article>
{% else %}
<a href="{{ href }}" class="chirpui-card chirpui-card--link chirpui-resource-card{{ " " ~ cls if cls else "" }}">
    {% if top_meta %}
    <div class="chirpui-card__top-meta">
        <span class="chirpui-font-xs chirpui-text-muted chirpui-font-mono"{% if top_meta_title %} title="{{ top_meta_title }}"{% endif %}>{{ top_meta }}</span>
    </div>
    {% endif %}
    <header class="chirpui-card__header">
        <div class="chirpui-card__header-badges">{% slot badges %}</div>
        <div class="chirpui-card__header-content">
            <span class="chirpui-card__title">{{ title }}</span>
            <div class="chirpui-card__header-subtitle">{% slot subtitle %}</div>
        </div>
    </header>
    <div class="chirpui-card__body">
        {% if description %}<p class="chirpui-text-muted chirpui-font-sm chirpui-resource-card__description">{{ description }}</p>{% endif %}
        {% slot %}
    </div>
    <div class="chirpui-card__footer-wrap">{% slot footer %}</div>
</a>
{% endif %}
{% end %}