{{ partial:partials.navbar.navbarBlog }}
<main>
    <div class="flex flex-col w-full">
        <div class="bg-gray-100 h-[240px] flex items-center">
            <div class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full">
                <h1
                    class="text-[40px] md:text-[70px] xl:text-[80px] font-bold text-black px-10"
                >
                    {{title}} Tag
                </h1>
            </div>
        </div>
        <article
            class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full pt-[46px] px-8 pb-[40px]"
        >
            <div class="mb-8">{{partial:breadcrumbs}}</div>
            {{ taxonomy:tags title:contains="{{title}}" }}
            <div class="">
                {{ if no_results }}
                <p>Sorry, there are no results.</p>
                {{ /if }} {{ entries paginate="10" as="posts"}} {{ posts }}
                <div class="mb-12">
                    <div>
                        <a class="flex-shrink-0" href="{{ url }}">
                            {{assets:image}}
                            <img
                                data-srcset="{{ glide:url width='360' }} 360w,
                                        {{ glide:url width='640' }} 640w,
                                        {{ glide:url width='768' }} 768w,
                                        {{ glide:url width='1024' }} 1024w,
                                        {{ glide:url width='1280' }} 1280w,
                                        {{ glide:url width='1536' }} 1536w"
                                sizes="auto"
                                data-src="{{ glide:url width='360' }}"
                                alt="{{ alt }}"
                                class="lazyload"
                            />
                            {{/assets:image}}
                        </a>
                    </div>
                    <div class="my-4">
                        <a
                            class="text-[34px] md:text-[40px] font-bold leading-tight text-black"
                            href="{{ url }}"
                            >{{ title }}</a
                        >
                    </div>
                    <div class="[&>p>img]:hidden">
                        {{ article_content }} {{ if type == "text" && first }}
                        {{ text | truncate(300, '...') }}{{/if}} {{
                        /article_content }}
                    </div>
                    <div
                        class="mt-4 text-sm flex flex-col md:flex-row justify-between gap-4 md:gap-0 md:items-center"
                    >
                        <div class="text-sm">
                            <span class="italic">{{ date }}</span>&nbsp;&nbsp;
                            <b
                                >{{authors:title}} {{ if tags }} /{{ tags }}
                                <a href="/tags/{{slug}}">{{ title }}</a>{{ if
                                !last }}, {{ /if }} {{ /tags }} {{/if}}</b
                            >
                        </div>
                        <div class="flex gap-5 items-center">
                            {{ comments_count = 0 }} {{ replies_count = 0 }} {{
                            comments }} {{ comments_count += 1 }} {{ if replies
                            }} {{ replies }} {{ replies_count += 1 }} {{
                            /replies }} {{ /if }} {{ /comments }}

                            <span class="font-bold"
                                ><i class="fa-regular fa-comment"></i>&nbsp;{{
                                comments_count + replies_count }} comments</span
                            >
                            <div
                                id="like-button"
                                class="like-button font-bold cursor-pointer"
                                data-post-id="{{id}}"
                                data-csrf-token="{{ csrf_token }}"
                            >
                                <span id="like-icon" class="like-icon"
                                    ><i class="fa-regular fa-heart"></i
                                ></span>
                                &nbsp;<span
                                    id="likes-count"
                                    class="font-bold likes-count"
                                    >{{ likes | count }}</span
                                >
                            </div>
                            <span>
                                <a
                                    href="{{url}}"
                                    class="text-sm font-semibold mt-4"
                                    ><span class="mr-2">EXPLORE</span
                                    ><i class="fa-solid fa-angle-right"></i>
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
                {{ /posts }}
                <!--  -->
                {{ paginate }} {{partial:pagination}} {{ /paginate }}
                <!--  -->
                {{ /entries }}
            </div>
            {{ /taxonomy:tags }}
        </article>
    </div>
</main>