@extends('theme::layouts.app')

@section('title', $title)

@section('content')
    <main class="flex-grow w-full">
        @include('theme::partials.breadcrumbs')

        <div class="max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
            <div class="mb-10">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-border-light dark:border-border-dark">
                    <div>
                        <p class="text-primary font-semibold text-sm uppercase tracking-widest mb-2">@lang('blog.Results found')</p>
                        <h1 class="text-3xl lg:text-4xl font-bold text-text-main dark:text-white">@lang('blog.heading|Search Results for:') <span class="text-primary">"{{ request('search') }}"</span></h1>
                    </div>
                    <p class="text-text-muted text-sm pb-1">@lang('blog.Showing :first-:last of :total results', ['first' => $posts->firstItem() ?? 0, 'last' => $posts->lastItem() ?? 0, 'total' => $posts->total()])</p>
                </div>
            </div>
            <div class="flex flex-col lg:flex-row gap-12">
                <div class="flex-grow lg:w-2/3">
                    @include('theme::partials.blog.posts-loop')
                </div>
                <aside class="lg:w-1/3 space-y-10">
                    @include('theme::partials.blog.widgets.search')
                    @include('theme::partials.blog.widgets.categories')
                    @include('theme::partials.blog.widgets.popular-posts')
                    @include('theme::partials.blog.widgets.newsletter')
                </aside>
            </div>
        </div>
    </main>
@endsection