{{!< default}}

<main class="content-area">
    <section class="px-5 sm:px-6 pt-4 sm:pt-5">
        <div class="max-w-content mx-auto flex items-center flex-col-reverse sm:flex-row gap-3 justify-between border-b border-brd pb-4 sm:pb-5">
            <div class="flex-1 flex flex-col gap-1">
                <h1 class="text-lg sm:text-xl font-medium leading-tight">{{name}}</h1>
                {{#if bio}}<p class="text-sm text-typ-tone max-w-lg text-balance">{{bio}}</p>{{/if}}
            </div>
            <div class="meta-pill">{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</div>

            {{#if profile_image}}
                <img class="h-16 w-16 shrink-0 self-start rounded-theme object-cover sm:h-20 sm:w-20" src="{{img_url profile_image size="s"}}" alt="{{name}}">
            {{else}}
                <div class="flex h-16 w-16 shrink-0 self-start items-center justify-center rounded-theme bg-bgr-tone text-sm font-semibold text-typ-tone sm:h-20 sm:w-20">{{name}}</div>
            {{/if}}
        </div>
        {{> "lists/post-feed"}}
    </section>
</main>