@include(snippets/header)
<div class="pagewrapper">
    <div id="main">
        <div class="meme-layout-wrapper">
            <link rel="stylesheet" href="/s/css/meme-creator.css">
            <div class="meme-select-container">
                <h1 class="meme-title">{{ t('meme.select_title') }}</h1>
                <p class="meme-subtitle">{{ t('meme.select_subtitle') }}</p>

                <div class="category-filter-bar">
                    @each(categories as cat)
                    <button class="category-chip @if(cat == 'All') active @endif" data-category="{!! cat !!}">{!! cat !!}</button>
                    @endeach
                </div>

                <div class="template-grid">
                    <a href="/meme/custom" class="template-item custom-template-card" data-category="All">
                        <div class="template-image-wrapper" style="background: var(--nav-bg, #2b2b2b); border-bottom: 1px solid rgba(255,255,255,0.05);">
                            <i class="fa fa-upload" style="font-size: 3.5rem; color: var(--accent, #9f0);"></i>
                        </div>
                        <div class="template-info">
                            <span class="template-name">{{ t('meme.custom_template_title') }}</span>
                            <span class="template-category-tag">{{ t('meme.custom_template_tag') }}</span>
                        </div>
                    </a>
                    @each(templates as template)
                    <a href="/meme/{{ template.id }}" class="template-item" data-category="{!! template.category || 'General' !!}">
                        <div class="template-image-wrapper">
                            <img src="{{ template.url }}" alt="{!! template.name !!}" loading="lazy">
                        </div>
                        <div class="template-info">
                            <span class="template-name">{!! template.name !!}</span>
                            <span class="template-category-tag">{!! template.category || 'General' !!}</span>
                        </div>
                    </a>
                    @endeach
                </div>
            </div>
        </div>

        <script>
        document.querySelectorAll('.category-chip').forEach(chip => {
            chip.addEventListener('click', () => {
                const category = chip.getAttribute('data-category');
                
                // Update active chip
                document.querySelectorAll('.category-chip').forEach(c => c.classList.remove('active'));
                chip.classList.add('active');

                // Filter grid
                document.querySelectorAll('.template-item').forEach(item => {
                    if (category === 'All' || item.getAttribute('data-category') === category) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
        </script>
    </div>
</div>
@include(snippets/footer)