{{!< 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}}
                <article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group">
                    <a href="{{url}}" class="block">
                        {{#if feature_image}}
                            <img
                                class="w-full h-72 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
                                src="{{img_url feature_image size="m"}}"
                                srcset="{{img_url feature_image size="s"}} 400w,
                                        {{img_url feature_image size="m"}} 600w,
                                        {{img_url feature_image size="l"}} 1000w,
                                        {{img_url feature_image size="xl"}} 2000w"
                                sizes="(max-width: 800px) 400px, (max-width: 1200px) 600px, 1000px"
                                alt="{{title}}"
                                loading="lazy"
                            >
                        {{else}}
                            <div class="w-full h-72 flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
                        {{/if}}
                        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                            <h2 class="text-[var(--text-primary)] text-xl font-semibold leading-tight">{{title}}</h2>
                        </div>
                    </a>
                </article>
            {{/foreach}}
        </div>

        <div id="loading-spinner" class="text-center py-8 hidden">
            <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>