{{ partial:partials.navbar.navbarBlog }}
<main>
    <!-- Section 1 -->
    <section id="section-1">
        <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}}
                    </h1>
                </div>
            </div>
            <article
                class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full pt-[25px] lg:pt-[46px] px-10 pb-[40px]"
            >
                <div class="mb-8">{{partial:breadcrumbs}}</div>
                {{ taxonomy:categories 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(304, '...') }}{{/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 format="d/m/Y" }}</span
                                >&nbsp;&nbsp;
                                <b
                                    ><a href="/authors/{{authors:slug}}"
                                        >{{authors:title}}</a
                                    >
                                    {{if categories}} /{{ categories }}
                                    <a href="/categories/{{slug}}"
                                        >{{ title }}</a
                                    >{{ if !last }}, {{ /if }} {{ /categories
                                    }}{{/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="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:categories }}
            </article>
        </div>
    </section>
</main>