{#- chirp-ui: Comment component
    Nested comment with avatar, author, body, optional replies link.

    Named slot: actions (footer actions, e.g. Reply button).

    Usage:
        from "chirpui/comment.html" import comment, comment_thread
        from "chirpui/avatar.html" import avatar

        call comment(author="Alice", time="1h ago", avatar_src="/a.jpg")
            <p>Great post! Thanks for sharing.</p>
        end

        call comment(author="Bob", time="2h ago")
            <p>I agree with this.</p>
            {% slot actions %}<a href="/reply">Reply</a>{% end %}
        end
-#}

{% def comment(author, time=none, href=none, avatar_src=none, avatar_initials=none, replies_url=none, replies_count=none, cls="") %}
<article class="chirpui-comment{{ " " ~ cls if cls else "" }}">
    <header class="chirpui-comment__header">
        {% from "chirpui/avatar.html" import avatar %}
        <span class="chirpui-comment__avatar">{{ avatar(src=avatar_src, initials=avatar_initials, alt=author, size="sm") }}</span>
        <div class="chirpui-comment__meta">
            {% if href %}
            <a href="{{ href }}" class="chirpui-comment__author">{{ author }}</a>
            {% else %}
            <span class="chirpui-comment__author">{{ author }}</span>
            {% end %}
            {% if time %}
            <time class="chirpui-comment__time">{{ time }}</time>
            {% end %}
        </div>
    </header>
    <div class="chirpui-comment__body">
        {% slot %}
    </div>
    <footer class="chirpui-comment__footer">
        {% if replies_url and replies_count %}
        <a href="{{ replies_url }}" class="chirpui-comment__replies-link">View {{ replies_count }} {{ "reply" if replies_count == 1 else "replies" }}</a>
        {% end %}
        <div class="chirpui-comment__actions">{% slot actions %}</div>
    </footer>
</article>
{% end %}

{% def comment_thread(cls="") %}
<ul class="chirpui-comment-thread{{ " " ~ cls if cls else "" }}">
    {% slot %}
</ul>
{% end %}