{% with has_replies=slot|striptags|wordcount %}
<article class="min-w-0">
    <div class="flex gap-4">
        <div class="flex-shrink-0">
            <div
                class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-rose-300 to-rose-500 text-xs font-bold text-white">
                {{ author_initials }}</div>
        </div>

        <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
                <span class="font-semibold text-slate-800">{{ author }}</span>
                <span class="text-xs text-slate-400">{{ timestamp }}</span>
            </div>
            <p class="mt-2 text-sm leading-6 text-slate-600">
                {{ content }}
            </p>

            <div class="mt-3 flex flex-wrap items-center gap-4 text-xs font-medium text-slate-500">
                <button type="button" class="inline-flex items-center gap-1.5 transition hover:text-slate-700">
                    <i class="fa fa-commenting-o"></i>
                    Reply
                </button>
                <button type="button" class="tracking-[0.3em] transition hover:text-slate-700">...</button>
            </div>
        </div>
    </div>

    {% if has_replies %}
    <div class="ml-4 mt-4 border-l border-slate-200 pl-5 sm:ml-5 sm:pl-6">
        <div class="space-y-6">
            {{ slot }}
        </div>
    </div>
    {% endif %}
</article>
{% endwith %}