{{ partial:partials.navbar.navbarPortfolioItem }}
<main>
    <!-- Section 1 -->
    <section id="section-1">
        <div id="jumbotron" class="relative max-h-[240px] overflow-hidden">
            <div class="max-h-[240px] relative">
                {{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="{{ alt }}"
                    class="w-full object-cover"
                />
                {{/assets:image}}
                <div
                    class="w-full absolute top-1/2 left-0 transform -translate-y-1/2"
                >
                    <div
                        class="max-w-3xl mx-auto px-7 lg:px-0 lg:max-w-5xl xl:max-w-7xl"
                    >
                        <h2
                            class="text-[35px] sm:text-[58px] md:text-[70px] lg:text-[80px] leading-tight text-black font-bold font-poppins"
                        >
                            {{title}}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section id="section-2">
        <div
            class="w-full lg:max-w-7xl mx-auto flex flex-col lg:flex-row pt-[46px] pb-[40px]"
        >
            <article
                class="w-full lg:w-9/12 px-[30px] md:px-[60px] lg:px-[30px]"
            >
                <div class="mb-8">{{partial:breadcrumbs}}</div>
                {{assets:images}}
                <div class="mb-20">
                    <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="object-cover lazyload"
                    />
                </div>
                {{/assets:images}}
            </article>
            <aside class="relative w-full lg:w-3/12 px-[30px]">
                <div class="sticky top-8">
                    <p class="tetx-sm text-[#4C4B4B]">{{description}}</p>
                    <h3 class="text-xl font-bold my-3">Info</h3>
                    <table class="text-[#ABABAB] text-sm">
                        <tr class="">
                            <td class="font-bold pb-2">Category:</td>
                            <td class="pl-8 pb-2">
                                <a href="{{gallery_categories:url }}"
                                    >{{gallery_categories:title}}</a
                                >
                            </td>
                        </tr>
                        <tr>
                            <td class="font-bold">Date:</td>
                            <td class="pl-8">{{date}}</td>
                        </tr>
                    </table>
                    <div
                        class="w-full flex gap-6 border-t mt-6 pt-6 text-[#ABABAB] text-sm"
                    >
                        <span>Follow me : </span>
                        <span class="flex gap-6">
                            <a href="#">
                                <i
                                    class="text-black fa-brands fa-facebook-f"
                                ></i>
                            </a>
                            <a href="#">
                                <i class="text-black fa-brands fa-twitter"></i>
                            </a>
                            <a href="#">
                                <i
                                    class="text-black fa-brands fa-linkedin-in"
                                ></i>
                            </a>
                            <a href="#">
                                <i class="text-black fa-brands fa-tumblr"></i>
                            </a>
                        </span>
                    </div>
                </div>
            </aside>
        </div>
    </section>
    <!-- Section 3 -->
    <section id="section-3">
        <div class="max-w-7xl mx-auto flex px-[30px] mt-12 lg:mt-0">
            <article>
                <h3 class="text-2xl font-bold mb-3">Related Posts</h3>

                {{ taxonomy:gallery_categories title:contains="{{
                gallery_categories:title }}" }}
                <div
                    class="flex flex-col justify-center lg:flex-row items-center gap-6"
                >
                    {{ entries }} {{ if slug != current_uri |
                    remove_left:'/portfolio-item/' }}
                    <div class="relative group">
                        <div
                            class="group-hover:opacity-0 group-hover:bg-white group-hover:transition group-hover:ease-in-out group-hover:duration-300 w-[409px] h-[205px] overflow-hidden z-20"
                        >
                            {{assets:images}}
                            <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="object-cover lazyload"
                            />
                            {{/assets:images}}
                        </div>
                        <div
                            class="w-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center flex flex-col z-10 hidden group-hover:flex"
                        >
                            <a class="text-xl font-bold mb-2" href="{{ url }}"
                                >{{ title }}</a
                            >
                            {{ gallery_categories }}
                            <a class="text-sm" href="{{url}}">{{title}}</a>
                            {{/gallery_categories}}
                        </div>
                    </div>
                    {{ /if }} {{ /entries }}
                </div>
                {{ /taxonomy:gallery_categories }}
            </article>
        </div>
        <div
            class="max-w-7xl mx-auto py-20 flex justify-between items-center px-[30px]"
        >
            {{collection:previous in="gallery" as="post" limit="1" }} {{if
            no_results }}
            <div></div>
            {{ /if }} {{post}}
            <div>
                <a href="{{url}}"
                    ><i class="fa-solid fa-xl fa-chevron-left"></i
                ></a>
            </div>
            {{/post}}{{/collection:previous}}
            <div>
                <i class="fa-solid fa-xl fa-ellipsis"></i>
            </div>
            {{collection:next in="gallery" as="post" limit="1" }} {{if
            no_results }}
            <div></div>
            {{ /if }} {{post}}
            <div>
                <a href="{{url}}"
                    ><i class="fa-solid fa-xl fa-chevron-right"></i
                ></a>
            </div>
            {{/post}}{{/collection:next}}
        </div>
    </section>
</main>