{{!< default}}

{{#post}}
<main class="content-area">
    <section class="stack-section">
        <header class="section-header text-center">
            <h1 class="section-title">{{title}}</h1>
            {{#if custom_excerpt}}
                <p class="section-description">{{custom_excerpt}}</p>
            {{else}}
                <p class="section-description">Browse by topic</p>
            {{/if}}
        </header>

        {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
            <div class="tag-directory grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                {{#foreach tags}}
                    <a class="tag-directory__card group relative flex min-h-[128px] flex-col rounded-[14px] border border-[var(--border)] bg-[var(--surface)] p-4 text-left transition-colors hover:bg-[var(--surface-muted)]" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
                        <span class="tag-directory__accent absolute inset-y-0 left-0 w-[3px] rounded-l-[14px] bg-[var(--tag-accent,var(--accent))]"></span>
                        <span class="flex items-start justify-between gap-3">
                            <strong class="text-[15px] font-semibold tracking-[-0.02em]">{{name}}</strong>
                            <img class="h-4 w-4 shrink-0 opacity-70 transition-opacity group-hover:opacity-100" src="{{asset "icons/arrow_outward.svg"}}" alt="">
                        </span>
                        {{#if description}}
                            <p class="mt-2 line-clamp-3 text-[13px] leading-5 text-[var(--text-soft)]">{{description}}</p>
                        {{else}}
                            <p class="mt-2 line-clamp-3 text-[13px] leading-5 text-[var(--text-soft)]">Posts filed under {{name}}.</p>
                        {{/if}}
                        <span class="mt-auto pt-3 text-[13px] font-medium text-[var(--text-soft)]">{{plural count.posts empty="0 posts" singular="% post" plural="% posts"}}</span>
                    </a>
                {{/foreach}}
            </div>
        {{/get}}
    </section>
</main>
{{/post}}
