{#- chirp-ui: Post Card component
    Full social post: avatar, name, handle, timestamp, content, media, actions.

    Named slots (Kida 0.3+): avatar, body (default), media, actions.

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

        call post_card(name="Alice", handle="@alice", time="2h ago")
            {% slot avatar %}avatar(src="...", alt="Alice", size="md"){% end %}
            {% slot media %}<img src="sunset.jpg" alt="Sunset">{% end %}
            {% slot actions %}action_bar_item(icon="♥", label="Like", count=42){% end %}
            <p>Check out this amazing sunset! 🌅</p>
        end

    Legacy: post_card_header, post_card_body, post_card_media, post_card_actions
    still available for backward compatibility.
-#}

{% def post_card(name=none, handle=none, time=none, href=none, cls="") %}
<article class="chirpui-post-card{{ " " ~ cls if cls else "" }}">
    {% if name or handle or time %}
    <header class="chirpui-post-card__header">
        <div class="chirpui-post-card__author">
            <span class="chirpui-post-card__avatar">{% slot avatar %}</span>
            <div class="chirpui-post-card__meta">
                {% if href %}
                <a href="{{ href }}" class="chirpui-post-card__name">{{ name }}</a>
                {% else %}
                <span class="chirpui-post-card__name">{{ name }}</span>
                {% end %}
                {% if handle %}
                <span class="chirpui-post-card__handle">{{ handle }}</span>
                {% end %}
                {% if time %}
                <time class="chirpui-post-card__time">{{ time }}</time>
                {% end %}
            </div>
        </div>
    </header>
    {% end %}
    <div class="chirpui-post-card__body">{% slot %}</div>
    <div class="chirpui-post-card__media">{% slot media %}</div>
    <footer class="chirpui-post-card__actions">{% slot actions %}</footer>
</article>
{% end %}

{% def post_card_header(name, handle=none, time=none, href=none, cls="") %}
<header class="chirpui-post-card__header{{ " " ~ cls if cls else "" }}">
    <div class="chirpui-post-card__author">
        <span class="chirpui-post-card__avatar">{% slot %}</span>
        <div class="chirpui-post-card__meta">
            {% if href %}
            <a href="{{ href }}" class="chirpui-post-card__name">{{ name }}</a>
            {% else %}
            <span class="chirpui-post-card__name">{{ name }}</span>
            {% end %}
            {% if handle %}
            <span class="chirpui-post-card__handle">{{ handle }}</span>
            {% end %}
            {% if time %}
            <time class="chirpui-post-card__time">{{ time }}</time>
            {% end %}
        </div>
    </div>
</header>
{% end %}

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

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

{% def post_card_actions(cls="") %}
<footer class="chirpui-post-card__actions{{ " " ~ cls if cls else "" }}">
    {% slot %}
</footer>
{% end %}