@extends('layouts.app')

@section('title', 'Search — ' . settings('site_title', 'Ahmad Hasan Dynamics Musings'))

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h1 class="font-display text-3xl md:text-4xl font-bold text-stone-900 dark:text-stone-100 mb-8">Search</h1>

    <form action="{{ route('search') }}" method="GET" class="mb-8">
        <div class="relative">
            <input type="text" name="q" value="{{ $query }}" placeholder="Search articles..." class="w-full px-4 py-3 pr-10 rounded-lg border border-stone-300 dark:border-stone-700 bg-white dark:bg-stone-900 focus:ring-2 focus:ring-amber-500 focus:border-transparent">
            <button type="submit" class="absolute right-3 top-3 text-stone-400 hover:text-stone-900 dark:hover:text-stone-100">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </button>
        </div>
    </form>

    @if($query && $posts->isNotEmpty())
        <p class="text-stone-600 dark:text-stone-400 mb-4 text-sm font-sans">Found {{ $posts->total() }} results for "{{ $query }}"</p>
        <div class="space-y-6">
            @foreach($posts as $post)
                <article class="border-b border-stone-200 dark:border-stone-800 pb-6">
                    <h2 class="font-display text-xl font-bold mb-1">
                        <a href="{{ route('posts.show', $post->slug) }}" class="text-stone-900 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-500">{{ $post->title }}</a>
                    </h2>
                    <time class="text-xs text-stone-500 font-sans">{{ $post->published_at?->format('M j, Y') }}</time>
                    @if($post->excerpt)
                        <p class="text-stone-600 dark:text-stone-400 mt-2 line-clamp-2">{!! $post->excerpt !!}</p>
                    @endif
                </article>
            @endforeach
        </div>
        <div class="mt-8">{{ $posts->links() }}</div>
    @elseif($query)
        <p class="text-stone-600 dark:text-stone-400">No results found for "{{ $query }}". Try a different search term.</p>
    @endif
</div>
@endsection