{{!< default}}

<header class="container mx-auto px-4 py-8 text-center">
    <h1 class="text-5xl font-bold tracking-tight text-[var(--text-primary)]">{{@site.title}}</h1>
    <p class="mt-2 text-xl text-[var(--text-secondary)]">{{@site.description}}</p>
</header>

<div class="container mx-auto px-4">
    {{#if posts}}
        <div id="posts-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {{#foreach posts}}
                {{> "post-card"}}
            {{/foreach}}

            {{#if pagination.next}}
                <div id="pagination-trigger" 
                     hx-get="{{page_url pagination.next}}" 
                     hx-trigger="revealed" 
                     hx-select="#posts-container > *" 
                     hx-target="this" 
                     hx-swap="outerHTML"
                     hx-indicator="#loading-spinner"
                     class="col-span-full h-1">
                </div>
            {{/if}}
        </div>

        <div id="loading-spinner" class="htmx-indicator text-center py-8">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
            <p class="text-[var(--text-secondary)] mt-2">Loading more posts...</p>
        </div>

    {{else}}
        <p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
    {{/if}}
</div>