{#- chirp-ui: Video Card component
    Thumbnail, duration badge, title, channel, views, date.

    Named slot: actions (overlay e.g. menu button on thumbnail).

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

        call video_card(href="/watch/1", thumbnail="/thumb.jpg", duration="4:32", title="...")
            {% slot actions %}<button class="chirpui-video-card__menu">⋯</button>{% end %}
        end
-#}

{% def video_card(href, thumbnail, duration, title, channel=none, channel_href=none, views=none, date=none, cls="") %}
<article class="chirpui-video-card{{ " " ~ cls if cls else "" }}">
    <a href="{{ href }}" class="chirpui-video-card__link"{{ route_link_attrs(href) | html_attrs }}>
        <figure class="chirpui-video-card__thumbnail">
            <img src="{{ thumbnail }}" alt="{{ title }}" loading="lazy">
            <span class="chirpui-video-card__duration">{{ duration }}</span>
            <span class="chirpui-video-card__actions">{% slot actions %}</span>
        </figure>
        <div class="chirpui-video-card__body">
            <h3 class="chirpui-video-card__title">{{ title }}</h3>
            {% if channel %}
            <p class="chirpui-video-card__channel">
                {% if channel_href %}
                <a href="{{ channel_href }}" class="chirpui-video-card__channel-link">{{ channel }}</a>
                {% else %}
                {{ channel }}
                {% endif %}
            </p>
            {% endif %}
            {% if views or date %}
            <p class="chirpui-video-card__meta">
                {% if views %}<span>{{ views }} views</span>{% endif %}
                {% if views and date %} · {% endif %}
                {% if date %}<span>{{ date }}</span>{% endif %}
            </p>
            {% endif %}
        </div>
    </a>
</article>
{% enddef %}