{{# Tag Archive Template #}}

{{# Hero #}}
<section class="hero-fullscreen relative -mt-6 overflow-hidden flex items-center"
         style="background: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg') center/cover no-repeat fixed;">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="hero-dots relative z-10 px-6 lg:px-[90px] pt-28 md:pt-32 pb-14 md:pb-16 w-full">
        <div class="max-w-4xl mx-auto text-center text-white">
            <p class="text-sm uppercase tracking-widest text-white/50 font-nunito font-bold mb-3"
               data-aos="fade-down" data-aos-delay="50">
                <i class="fa-solid fa-tag mr-2"></i>{{ trans:messages.tag_label ?? 'Tag' }}
            </p>
            <h1 class="font-nunito text-3xl md:text-4xl lg:text-[42px] font-bold mb-4 leading-[1.4]"
                data-aos="fade-down" data-aos-delay="100">
                {{ title }}
            </h1>
            {{ if description }}
            <p class="text-lg text-white/80 max-w-2xl mx-auto"
               data-aos="fade-up" data-aos-delay="250">
                {{ description }}
            </p>
            {{ /if }}
        </div>
    </div>
</section>

{{# Articles with this tag #}}
<section class="py-12 full-bleed bg-[#f9f8ff]">
    <div class="max-w-6xl mx-auto">
        {{ taxonomy:articles :tag="slug" sort="date:desc" as="posts" }}
            {{ if no_results }}
                <div class="text-center py-16">
                    <i class="fa-solid fa-folder-open text-5xl text-[#6254e7]/20 mb-4 block"></i>
                    <p class="text-[#696687] text-lg">{{ trans:messages.blog_no_articles ?? 'No articles found.' }}</p>
                </div>
            {{ else }}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {{ posts }}
                    <article class="blog-card bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
                             data-aos="fade-up" data-aos-delay="{{ index | multiply:80 }}">
                        <a href="{{ locale_path }}/{{ slug | strip_locale_prefix:{current_locale} }}" class="block">
                            <div class="relative h-40 overflow-hidden {{ if !featured_image }}blog-card-gradient{{ /if }}"
                                 {{ if featured_image }}style="background: url('{{ featured_image }}') center/cover no-repeat;"{{ /if }}>
                                {{ if !featured_image }}<i class="fa-solid fa-newspaper text-5xl text-white/20"></i>{{ /if }}
                            </div>
                            <div class="p-6 text-center">
                                <h2 class="font-nunito text-lg font-bold text-[#252a3f] mb-2 line-clamp-2 hover:text-[#6254e7] transition-colors">
                                    {{ title }}
                                </h2>
                                {{ if meta_description }}
                                <p class="text-sm text-[#696687] line-clamp-3 mb-4">{{ meta_description }}</p>
                                {{ /if }}
                                <div class="flex items-center justify-center gap-4 text-xs text-[#a0aec6]">
                                    <time datetime="{{ date format='Y-m-d' }}">{{ date format="M d, Y" }}</time>
                                    <span><i class="fa-solid fa-eye mr-1"></i>{{ view_count ?? 0 }}</span>
                                    <span><i class="fa-solid fa-heart mr-1"></i>{{ likes ?? 0 }}</span>
                                </div>
                            </div>
                        </a>
                    </article>
                    {{ /posts }}
                </div>
            {{ /if }}
        {{ /taxonomy:articles }}
    </div>
</section>

{{# Back to Blog link #}}
<div class="text-center py-8">
    <a href="{{ locale_path }}/blog"
       class="inline-flex items-center gap-2 text-[#6254e7] hover:text-[#3b3663] font-nunito font-bold transition-colors">
        <i class="fa-solid fa-arrow-left text-sm"></i>
        {{ trans:messages.back_to_blog ?? 'Back to Blog' }}
    </a>
</div>