{{ 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"
                >
                    Search results for: {{ get:q | truncate(37, '...') }}
                </h1>
            </div>
        </div>
        <article class="max-w-7xl mx-auto w-full pt-[46px] px-8 pb-[40px]">
            <div class="mb-8">{{partial:breadcrumbs}}</div>
            <div class="mb-6">
                <h2 class="text-6xl font-bold text-black mb-6">New Search:</h2>
                <form action="/search" class="w-full border-b p-2">
                    <input
                        type="search"
                        required
                        name="q"
                        autofocus
                        autocomplete="off"
                        value="{{get:q}}"
                        placeholder="Type here"
                        class="w-full outline-none border-none text-black placeholder-gray-500"
                    />
                </form>
                <p class="mt-3 text-xs">
                    If you are not happy with the results below please do
                    another search
                </p>
            </div>
            {{ search:results index="blog_posts" paginate="6" as="posts"
            sort="date:desc" }}{{posts}} {{ if no_results }}
            <h2 class="text-gray-600 text-base">No posts were found.</h2>
            {{ else }}

            <div class="flex gap-6 border-b mb-4 pb-8">
                <a href="{{url}}" class="flex-shrink-0">
                    {{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="w-[60px] sm:w-[80px] lg:w-[130px] aspect-square object-cover lazyload"
                    />
                    {{/assets:image}}
                </a>
                <div class="space-y-2">
                    <a href="{{url}}" class="text-xl font-black mb-4"
                        >{{title}}</a
                    >
                    <div class="text-[15px] [&>p>img]:hidden">
                        {{ article_content }}
                        <!--  -->
                        {{ if type == "text" && first }}
                        <!--  -->
                        {{ text | truncate(204, '...') }}
                        <!--  -->
                        {{/if}}
                        <!--  -->
                        {{/article_content }}
                    </div>
                </div>
            </div>

            {{ /if }}{{/posts}}
            <!--  -->
            {{ paginate }} {{partial:pagination}} {{ /paginate }}
            <!--  -->
            {{ /search:results }}
        </article>
    </div>
</main>