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

@section('title', __('messages.search'))
@section('meta_description', __('messages.search'))
@section('meta')
    <meta name="robots" content="noindex, nofollow">
@endsection

@section('content')
    <div class="inner-page">
        <div class="inner-body">
            <div class="container">
                <div class="inner-body-content">
                    <form class="search-form mb-40" action="{{ route('search') }}" role="search">
                        <div class="d-flex flex-wrap gap">
                            <div class="form-group">
                                <input class="form-control" placeholder="{{ __('messages.search_for') }}" name="q"
                                       type="text" value="{{ request('q') }}">
                            </div>
                            <button class="btn btn-primary form-btn" aria-label="{{ __('messages.search') }}"
                                    type="submit"><i class="icon-search"></i></button>
                        </div>
                    </form>

                    @if ($posts && !empty($keyword))
                        @if ($posts->isEmpty())
                            <div class="alert alert-danger">{{ __('messages.no_search_result') }}</div>
                        @else
                            <div class="search-results">
                                <h3>{{ __('messages.search_results_for', ['keyword' => $keyword]) }}</h3>
                                <ul>
                                    @foreach ($posts as $post)
                                        <li>
                                            <a href="{{ route('post.show', $post->slug) }}">
                                                {{ $post->title }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection