<section class="px-5 sm:px-6 py-4" data-home-featured>
    <div class="max-w-content mx-auto">
        {{#get "posts" filter="featured:true" limit="12" include="authors,tags"}}
            {{#if posts}}
                <section data-featured-slider>
                    <div class="flex gap-2 items-end justify-between border-b border-brd pb-2">
                        <h2 class="text-sm uppercase font-medium text-typ-tone">Featured</h2>
                        <div class="flex justify-between gap-2">
                            <button class="cursor-pointer hover:opacity-75 disabled:opacity-40" data-featured-prev type="button">
                                <i class="icon icon-chevron-left size-4 stroke-2" role="presentation">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M15 6l-6 6l6 6"></path>
                                    </svg>
                                </i>
                                <span class="sr-only">Previous</span>
                            </button>
                            <button class="cursor-pointer hover:opacity-75 disabled:opacity-40" data-featured-next type="button">
                                <span class="sr-only">Next</span>
                                <i class="icon icon-chevron-right size-4 stroke-2" role="presentation">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M9 6l6 6l-6 6"></path>
                                    </svg>
                                </i>
                            </button>
                        </div>
                    </div>
                    <div class="overflow-hidden mt-4">
                        <div class="featured-slider flex gap-4 sm:gap-5 overflow-x-auto snap-x snap-mandatory scroll-smooth" data-featured-track style="scrollbar-width: none; -ms-overflow-style: none;">
                            {{#foreach posts}}
                                <a href="{{url}}" class="featured-slider__item relative block group shrink-0 snap-start basis-[78%] sm:basis-[58%] lg:basis-[38%]">
                                    {{#if feature_image}}
                                        <figure class="relative block rounded-theme overflow-hidden contrast-125 brightness-75 group-hover:contrast-110 group-hover:brightness-90 transition-all" role="none">
                                            <img class="w-full aspect-video object-cover rounded-[inherit]" src="{{img_url feature_image size="m"}}" alt="{{title}}">
                                        </figure>
                                        <h2 class="text-white absolute bottom-0 left-0 w-full px-3 mb-2.5 text-sm font-medium leading-tight line-clamp-2 text-ellipsis">{{title}}</h2>
                                    {{else}}
                                        <figure class="relative rounded-theme overflow-hidden bg-bgr-tone aspect-video border border-brd p-3 flex items-end" role="none">
                                            <h2 class="text-typ w-full text-sm font-medium leading-tight line-clamp-2 text-ellipsis">{{title}}</h2>
                                        </figure>
                                    {{/if}}
                                </a>
                            {{/foreach}}
                        </div>
                    </div>
                </section>
            {{/if}}
        {{/get}}
    </div>
</section>

<section class="px-5 sm:px-6 py-4" data-home-latest>
    <div class="max-w-content mx-auto">
        <div class="flex gap-2 items-end justify-between border-b border-brd pb-2">
            <h2 class="text-sm uppercase font-medium text-typ-tone">Latest</h2>
        </div>
        <div class="flex flex-col gap-8 mb-8 mt-1" data-load-more-root>
            {{> "lists/post-items" posts=posts}}
            {{pagination}}
        </div>
    </div>
</section>
