{% comment %}
Template gallery - featured templates banner + category filter + card grid.
Uses Alpine.js for client-side category filtering.
{% endcomment %}

<div x-data="{ activeCategory: 'all' }">

    <!-- Featured templates banner -->
    <div class="rounded-2xl bg-gradient-to-br from-green-50 via-green-50/60 to-white border border-green-100 p-6 mb-8">
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Aside -->
            <div class="flex-shrink-0 lg:w-48 flex flex-col justify-center">
                <span class="text-xs font-semibold text-green-700 tracking-wide">Featured templates</span>
                <h2 class="text-xl font-bold text-stone-900 mt-1" style="letter-spacing: -0.01em;">Our top picks</h2>
                <p class="text-sm text-stone-500 mt-1">Helpful starting points to plan your next post.</p>
            </div>
            <!-- Featured cards -->
            <div class="flex-1 grid grid-cols-1 sm:grid-cols-3 gap-3">
                {% for tpl in featured_templates %}
                <button type="button"
                        @click="$dispatch('use-builtin-template', { id: {{ tpl.id }} })"
                        class="text-left bg-white rounded-xl border border-stone-200 p-4 hover:border-stone-300 hover:shadow-sm transition-all group cursor-pointer"
                        style="border-top: 3px solid rgba({{ tpl.color }}, 0.6);">
                    <div class="text-2xl mb-2">{{ tpl.emoji }}</div>
                    <h3 class="text-base font-semibold text-stone-800 mb-1 line-clamp-2">{{ tpl.title }}</h3>
                    <p class="text-sm text-stone-500 line-clamp-3">{{ tpl.description }}</p>
                </button>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Category filter chips -->
    <div class="flex items-center gap-2 mb-6 overflow-x-auto pb-1 -mx-1 px-1">
        {% for cat in template_categories %}
        <button type="button"
                @click="activeCategory = '{{ cat.slug }}'"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full border whitespace-nowrap transition-all duration-150 cursor-pointer"
                :class="activeCategory === '{{ cat.slug }}'
                    ? 'bg-stone-500 text-white border-stone-600'
                    : 'bg-white text-stone-500 border-stone-200 hover:border-stone-300 hover:text-stone-700'">
            {% if cat.slug == "all" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
            {% elif cat.slug == "tip" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 006 8c0 1 .2 2.2 1.5 3.5.7.7 1.2 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
            {% elif cat.slug == "case-study" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 12H10M15 8H10M19 17V5a2 2 0 00-2-2H4M4 3a2 2 0 00-2 2v2a1 1 0 001 1h3m2 13a2 2 0 01-2-2v-1a1 1 0 011-1h10a1 1 0 011 1v1a2 2 0 01-2 2H8z"/></svg>
            {% elif cat.slug == "story" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7V21M12 7C12 5.9 11.6 4.9 10.8 4.2 10.1 3.4 9.1 3 8 3H3a1 1 0 00-1 1v13a1 1 0 001 1h6c1.6 0 3 1.3 3 3M12 7c0-1.1.4-2.1 1.2-2.8C13.9 3.4 14.9 3 16 3h5a1 1 0 011 1v13a1 1 0 01-1 1h-6c-1.6 0-3 1.3-3 3"/></svg>
            {% elif cat.slug == "how-to" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 12.5L6.6 20.4a2 2 0 01-2.8 0 2 2 0 010-2.8l7.9-7.9M15.7 4.3a1.4 1.4 0 012 0l2 2a1.4 1.4 0 010 2l-4.6 4.6-4-4 4.6-4.6z"/></svg>
            {% elif cat.slug == "question" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
            {% elif cat.slug == "opinion" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><path d="M8 12h2v-2H8zM14 12h2v-2h-2z"/></svg>
            {% elif cat.slug == "list" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M12 11h4M12 16h4M8 11h.01M8 16h.01"/><path d="M9 6h6"/></svg>
            {% elif cat.slug == "behind-the-scenes" %}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l7-5 4 4 7-5M3 11v8a2 2 0 002 2h14a2 2 0 002-2v-8"/></svg>
            {% endif %}
            {{ cat.label }}
        </button>
        {% endfor %}
    </div>

    <!-- Template grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {% for tpl in builtin_templates %}
        <button type="button"
                x-show="activeCategory === 'all' || activeCategory === '{{ tpl.category }}'"
                x-transition:enter="transition ease-out duration-150"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                @click="$dispatch('use-builtin-template', { id: {{ tpl.id }} })"
                class="text-left bg-white rounded-xl border border-stone-200 p-4 hover:border-stone-300 hover:shadow-sm transition-all group cursor-pointer"
                style="border-top: 3px solid rgba({{ tpl.color }}, 0.45);">
            <div class="text-2xl mb-2">{{ tpl.emoji }}</div>
            <h3 class="text-base font-semibold text-stone-800 mb-1 line-clamp-2 group-hover:text-stone-900">{{ tpl.title }}</h3>
            <p class="text-sm text-stone-500 line-clamp-3">{{ tpl.description }}</p>
        </button>
        {% endfor %}
    </div>

</div>