{{ define "main" }}
<div class="bg-gray-900 min-h-screen py-16 px-4 sm:px-6 lg:px-8" x-data="{ category: 'All' }" x-init="window.MembershipAPI.checkDownloadLimit()">
    <div class="max-w-7xl mx-auto">
        <div class="text-center">
            <h1 class="text-4xl font-extrabold text-gray-100 tracking-tight sm:text-5xl">Resource Library</h1>
            <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
                Download guides, checklists, and protocols to upgrade your hydroponic game.
                <br>
                <span class="text-sm text-gray-400 italic">For educational purposes only.</span>
            </p>
        </div>

        <!-- Paywall Message -->
        <div class="paywall-message mt-8 bg-gray-800 rounded-lg p-8 border border-gray-700 text-center" style="display: none;">
            <h2 class="text-2xl font-bold text-gray-100 mb-4">Download Limit Reached</h2>
            <p class="text-gray-300 mb-6">
                You've used your free download. Become a member for unlimited access to all resources.
            </p>
            <a href="/membership/" class="inline-flex items-center px-6 py-3 bg-primary hover:bg-emerald-700 text-white font-semibold rounded-lg transition-colors">
                Become a Member
            </a>
        </div>

        <!-- Download Limit Info -->
        <div class="guest-only mt-6 bg-blue-900/30 border border-blue-700 rounded-lg p-4 text-center" style="display: block;">
            <p class="text-blue-200">
                <span class="font-semibold">Free users:</span> 1 download allowed. 
                <a href="/membership/" class="underline hover:text-blue-100">Sign up for membership</a> for unlimited downloads.
            </p>
        </div>
        <div class="membership-only mt-6 bg-green-900/30 border border-green-700 rounded-lg p-4 text-center" style="display: none;">
            <p class="text-green-200">
                <span class="font-semibold">Member:</span> Unlimited downloads available.
            </p>
        </div>

        <!-- Filters -->
        <div class="mt-10 flex justify-center flex-wrap gap-2">
            {{ $categories := slice "All" }}
            {{ range .Site.Data.library }}
                {{ $categories = $categories | append .category }}
            {{ end }}
            {{ range ($categories | uniq) }}
            <button 
                @click="category = '{{ . }}'"
                :class="{ 'bg-primary text-white': category === '{{ . }}', 'bg-gray-800 text-gray-300 hover:bg-gray-700': category !== '{{ . }}' }"
                class="px-4 py-2 rounded-full text-sm font-medium shadow-sm transition-colors border border-gray-700">
                {{ . }}
            </button>
            {{ end }}
        </div>

        <!-- Grid -->
        <div class="paywall-content mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {{ range .Site.Data.library }}
            <div x-show="category === 'All' || category === '{{ .category }}'" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 class="bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex flex-col border border-gray-700">
                <div class="p-6 flex-1">
                    <div class="flex justify-between items-start">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/20 text-primary">
                            {{ .category }}
                        </span>
                        <span class="text-xs text-gray-500">{{ .date }}</span>
                    </div>
                    <div class="mt-4 flex items-center gap-3">
                        <svg class="h-8 w-8 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
                        </svg>
                        <h3 class="text-lg font-medium text-gray-100">{{ .title }}</h3>
                    </div>
                    <p class="mt-3 text-sm text-gray-300">{{ .description }}</p>
                </div>
                <div class="bg-gray-900 px-6 py-4 border-t border-gray-700">
                    <a href="{{ .file }}" download data-file-path="{{ .file }}" class="download-link flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-primary bg-white hover:bg-gray-50 border-primary transition-colors">
                        Download {{ .filename }}
                    </a>
                </div>
            </div>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}