{#- chirp-ui: Channel Card component
    Avatar, name, subscriber count, subscribe button.

    Named slots: body (extra info below subscribers), actions.

    Usage:
        from "chirpui/channel_card.html" import channel_card
        from "chirpui/button.html" import btn

        call channel_card(href="/channel/1", name="Dev Channel", subscribers="12.5K")
            {% slot body %}<p>Custom info</p>{% end %}
            {% slot actions %}btn("Subscribe", variant="primary"){% end %}
        end
-#}

{% def channel_card(href, name, avatar_src=none, avatar_initials=none, subscribers=none, cls="", use_slots=false) %}
<article class="chirpui-channel-card{{ " " ~ cls if cls else "" }}">
    {% if use_slots %}
    <a href="{{ href }}" class="chirpui-channel-card__link">
        {% from "chirpui/avatar.html" import avatar %}
        {{ avatar(src=avatar_src, initials=avatar_initials, alt=name, size="lg") }}
        <div class="chirpui-channel-card__info">
            <h3 class="chirpui-channel-card__name">{{ name }}</h3>
            {% if subscribers %}
            <p class="chirpui-channel-card__subscribers">{{ subscribers }} subscribers</p>
            {% end %}
            <div class="chirpui-channel-card__body">{% slot body %}</div>
        </div>
    </a>
    <div class="chirpui-channel-card__actions">{% slot actions %}</div>
    {% else %}
    <a href="{{ href }}" class="chirpui-channel-card__link">
        {% from "chirpui/avatar.html" import avatar %}
        {{ avatar(src=avatar_src, initials=avatar_initials, alt=name, size="lg") }}
        <div class="chirpui-channel-card__info">
            <h3 class="chirpui-channel-card__name">{{ name }}</h3>
            {% if subscribers %}
            <p class="chirpui-channel-card__subscribers">{{ subscribers }} subscribers</p>
            {% end %}
        </div>
    </a>
    <div class="chirpui-channel-card__actions">
        {% slot %}
    </div>
    {% end %}
</article>
{% end %}