{{ partial:partials.navbar.navbarBlog }}
<main>
    {{ if {session:error} }}
    <div class="bg-red-500 text-white p-4 rounded-lg shadow-md mb-6">
        {{ session:error }}
    </div>
    {{ /if }}
    <div class="max-w-7xl mx-auto mt-10">
        <div class="flex flex-col lg:flex-row">
            <article id="article" class="w-full lg:w-2/3 px-10 pb-6">
            <div class="mb-4">{{partial:breadcrumbs}}</div>
            <div>
                {{assets:image}}
                <img id="primaryimage"
                    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="(min-width: 1536px) 1536px,
                        (min-width: 1280px) 1280px,
                        (min-width: 1024px) 1024px,
                        (min-width: 768px) 768px,
                        (min-width: 640px) 640px,
                        100vw"
                    data-src="{{ glide:url width='360' }}"
                    alt="{{ title }}"
                    class="w-full h-auto"
                />
                {{/assets:image}}
            </div>
            <h1 class="text-4xl font-bold my-8">{{title}}</h1>
            <div
                id="content-container"
                class="text-[16px] leading-6 [&>img]:block [&>img]:mx-auto [&>img]:my-4 [&>p]:my-4 [&>p]:text-justify [&>p>a]:text-blue-600 [&>ol]:list-decimal [&>ul]:list-disc"
            >
                {{ article_content }}
                <!-- text -->
                {{ if type == "text" }} {{ text }}
                <!-- text -->

                <!-- image -->
                {{ elseif type == "new_set" }} {{assets:article_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 w-full h-auto"
                />

                <span class="block text-sm text-gray-600 mt-2 text-center"
                    >{{article_image_source}}</span
                >
                {{/assets:article_image}} {{ /if }}
                <!-- image -->

                {{ /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>
                    <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
                        ><i class="fa-regular fa-comment"></i>&nbsp;{{
                        comments_count + replies_count }} comments</span
                    >

                    <div
                        id="like-button"
                        class="like-button 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>
                </div>
            </div>
            <div
                class="my-20 flex justify-between items-center gap-10 px-6 lg:px-0"
            >
                {{ collection:previous in="blog_posts" as="post" limit="1" }} {{
                if no_results }}
                <div class="w-1/3 text-[#4C4B4B]">
                    There are no previous posts.
                </div>
                {{ /if }} {{ post }}

                <a
                    id="next-post"
                    class="flex w-1/3 md:w-2/5 items-center gap-6 group"
                    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 hidden md:block w-24"
                    />
                    {{/assets:image}}
                    <div class="max-w-[206px]">
                        <h4
                            class="hidden md:block font-bold text-lg leading-5 mb-1"
                        >
                            {{title}}
                        </h4>
                        <span
                            class="flex items-center gap-2 text-[12px] font-semibold text-gray-500"
                            ><i
                                class="fa-solid fa-arrow-left-long group-hover:transform group-hover:-translate-x-[10px] group-hover:duration-300 group-hover:ease-in-out"
                            ></i
                            >Previous</span
                        >
                    </div>
                </a>
                {{ /post }} {{ /collection:previous }}
                <div class="flex w-1/3 md:w-1/5 flex-col items-center gap-4">
                    <span class="text-gray-500 text-sm tracking-widest"
                        >SHARE</span
                    >
                    <div class="flex items-center gap-4">
                        <a href="#"><i class="fa-brands fa-facebook"></i></a>
                        <a href="#"><i class="fa-brands fa-twitter"></i></a>
                        <a href="#"><i class="fa-brands fa-linkedin"></i></a>
                        <a href="#"><i class="fa-brands fa-whatsapp"></i></a>
                    </div>
                </div>
                {{ collection:next in="blog_posts" as="post" limit="1" }} {{ if
                no_results }}
                <div class="w-1/3 text-[#4C4B4B]">There are no next posts.</div>
                {{ /if }} {{ post }}
                <a
                    id="next-post"
                    class="flex w-1/3 md:w-2/5 justify-end items-center gap-6 group"
                    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 hidden md:block w-24"
                    />
                    {{/assets:image}}
                    <div class="max-w-[206px]">
                        <h4
                            class="hidden md:block font-bold text-lg leading-5 mb-1"
                            class=""
                        >
                            {{title}}
                        </h4>
                        <span
                            class="flex items-center gap-2 text-[12px] font-semibold text-gray-500"
                            >Next<i
                                class="fa-solid fa-arrow-right-long group-hover:transform group-hover:translate-x-[10px] group-hover:duration-300 group-hover:ease-in-out"
                            ></i
                        ></span>
                    </div>
                </a>
                {{ /post }} {{ /collection:next }}
            </div>
            <div>
                {{ if comments }}
                <div class="mb-6 px-4">
                    {{ comments }} {{ if type == 'new_set' || !type }}
                    <div class="my-8">
                        <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
                            <div class="flex-none w-[41px]">
                                {{avatar_comment:image}} {{assets:url}}
                                <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 w-full"
                                />
                                {{/assets:url}} {{/avatar_comment:image}}
                            </div>
                            <div>
                                <h4 class="text-[12px] text-black font-bold">
                                    {{name}}
                                </h4>
                                <span
                                    class="text-[12px] font-bold text-[#ABABAB]"
                                    >{{timestamp format="d/m/Y"}}</span
                                >
                                <p class="text-[15px] text=[#4C4B4B] mt-2">
                                    {{message | nl2br}}
                                </p>
                                <div
                                    id="reply-button-div-{{ id }}"
                                    class="mt-2"
                                >
                                    <a
                                        id="REPLY-BUTTON-{{ id }}"
                                        href="#REPLY-FORM"
                                        data-entry-id="{{entry_id}}"
                                        data-comment-id="{{ id }}"
                                        data-commenter-name="{{ name }}"
                                        class="text-[12px] font-bold"
                                        ><i class="fa-regular fa-comment"></i
                                        >&nbsp;&nbsp;Reply
                                    </a>
                                </div>
                                <!-- REPLY TO COMMENT -->
                                <div
                                    id="reply-form-{{ id }}"
                                    class="hidden pt-[45px] mb-16 reply-form"
                                >
                                    <h1
                                        id="reply-title"
                                        class="text-2xl font-bold mb-5"
                                    >
                                        Reply To User
                                    </h1>
                                    <div class="">
                                        <form
                                            id="REPLY-FORM"
                                            action="/reply-to-comment-form-submit/{{ entry_id }}/{{ id }}"
                                            method="POST"
                                            class="w-full"
                                        >
                                            {{csrf_field}}
                                            <div class="my-2">
                                                <button
                                                    id="CANCEL-REPLY-{{id}}"
                                                    class="font-bold"
                                                    data-comment-id="{{ id }}"
                                                >
                                                    Cancel Reply
                                                </button>
                                            </div>
                                            <div class="w-full flex gap-2">
                                                <div
                                                    class="w-1/2 flex gap-2 mb-2 items-center"
                                                >
                                                    <input
                                                        class="w-full p-3 bg-gray-100 outline-none focus:outline-none"
                                                        type="text"
                                                        name="name"
                                                        id="name"
                                                        placeholder="Name"
                                                    />
                                                    {{ get_errors:name }}
                                                    <div class="errors">
                                                        <ul>
                                                            {{ messages }}
                                                            <li
                                                                class="text-red-500"
                                                            >
                                                                {{ message }}
                                                            </li>
                                                            {{ /messages }}
                                                        </ul>
                                                    </div>
                                                    {{ /get_errors:name }}
                                                </div>
                                                <div
                                                    class="w-1/2 flex gap-2 mb-2 items-center"
                                                >
                                                    <input
                                                        class="w-full p-3 bg-gray-100 outline-none focus:outline-none"
                                                        type="email"
                                                        name="email"
                                                        id="email"
                                                        placeholder="Email"
                                                    />
                                                    {{ get_errors:email }}
                                                    <div class="errors">
                                                        <ul>
                                                            {{ messages }}
                                                            <li
                                                                class="text-red-500"
                                                            >
                                                                {{ message }}
                                                            </li>
                                                            {{ /messages }}
                                                        </ul>
                                                    </div>
                                                    {{ /get_errors:email }}
                                                </div>
                                            </div>
                                            <textarea
                                                class="w-full p-3 bg-gray-100 outline-none focus:outline-none"
                                                name="message"
                                                id="message"
                                                placeholder="Type a comment"
                                                rows="8"
                                            ></textarea>
                                            {{ get_errors:message }}
                                            <div class="errors">
                                                <ul>
                                                    {{ messages }}
                                                    <li class="text-red-500">
                                                        {{ message }}
                                                    </li>
                                                    {{ /messages }}
                                                </ul>
                                            </div>
                                            {{ /get_errors:message }}
                                            <div class="my-2">
                                                <!-- <input
                                                    type="checkbox"
                                                    name="rememberMe"
                                                    id="rememberMe"
                                                />
                                                <label for="rememberMe"
                                                    >Save my name and email in
                                                    this browser for the next
                                                    time I reply.</label
                                                > -->
                                            </div>
                                            <button
                                                type="submit"
                                                class="bg-black text-white px-8 py-4 font-bold tracking-widest"
                                            >
                                                SUBMIT
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ if replies }}
                    <div class="pl-10 lg:pl-14">
                        <h3 class="">Reply to this comment</h3>
                        {{ replies }}
                        <div class="my-4">
                            <div
                                class="flex flex-col sm:flex-row gap-4 sm:gap-6"
                            >
                                <div class="flex-none w-[41px]">
                                    {{avatar_comment:image}} {{assets:url}}
                                    <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 w-full"
                                    />
                                    {{/assets:url}} {{/avatar_comment:image}}
                                </div>
                                <div>
                                    <h4
                                        class="text-[12px] text-black font-bold"
                                    >
                                        {{ name }}
                                    </h4>
                                    <span
                                        class="text-[12px] font-bold text-[#ABABAB]"
                                    >
                                        {{ timestamp format="d/m/Y" }}
                                    </span>
                                    <p class="text-[15px] text-[#4C4B4B] mt-2">
                                        {{ message | nl2br }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        {{ /replies }}
                    </div>
                    {{ /if }} {{ /if }} {{ /comments }}
                </div>
                {{ /if }}
            </div>
            <!-- ADD COMMENT -->
            <div id="comment-form" class="pt-[45px] mb-16">
                <h1 class="text-2xl font-bold mb-5">Post a Comment</h1>
                <div class="">
                    <form
                        action="/comment-form-submit/{{ id }}"
                        method="POST"
                        class="w-full"
                        id="comment-form"
                    >
                        {{csrf_field}}
                        <div class="w-full flex gap-2">
                            <div class="w-1/2 flex gap-2 mb-2 items-center">
                                <input
                                    class="w-full p-3 bg-gray-100 outline-none focus:outline-none"
                                    type="text"
                                    name="name"
                                    id="comment-name"
                                    placeholder="Name"
                                />
                            </div>
                            <div class="w-1/2 flex gap-2 mb-2 items-center">
                                <input
                                    class="w-full p-3 bg-gray-100 outline-none focus:outline-none"
                                    type="email"
                                    name="email"
                                    id="comment-email"
                                    placeholder="Email"
                                />
                            </div>
                        </div>
                        <textarea
                            class="w-full p-3 bg-gray-100 outline-none focus:outline-none"
                            name="message"
                            id="message"
                            placeholder="Type a comment"
                            rows="8"
                        ></textarea>
                        <div class="my-2">
                            <input
                                type="checkbox"
                                name="rememberMe"
                                id="comment-rememberMe"
                            />
                            <label for="rememberMe"
                                >Save my name and email in this browser for the
                                next time I comment.</label
                            >
                        </div>
                        <button
                            type="submit"
                            class="bg-black text-white px-8 py-4 font-bold tracking-widest"
                        >
                            SUBMIT
                        </button>
                    </form>
                </div>
            </div>
        </article>
        <aside class="w-full lg:w-1/3 px-8 pb-6">{{partial:sidebar}}</aside>
    </div>
</main>