@extends('layouts.app')
@section('title', __('nav.search'))

@section('content')
    <div class="shell py-stack-lg">
        <form action="{{ route('search') }}" method="get" class="mx-auto max-w-xl">
            <label for="q" class="u-label-sm text-secondary">{{ __('nav.search') }}</label>
            <input id="q" name="q" type="search" value="{{ $term }}" autofocus
                   placeholder="{{ __('nav.search_placeholder') }}" class="field mt-2 text-body-lg">
        </form>

        @if ($term !== '')
            <h1 class="mt-stack-lg text-headline-md">{{ __('shop.results_for', ['term' => $term]) }}</h1>

            @if ($results->isEmpty())
                <p class="mt-stack-md text-body-lg text-on-surface-variant">
                    {{ __('shop.no_results', ['term' => $term]) }}
                </p>
            @else
                <div class="mt-stack-md grid grid-cols-2 gap-4 md:gap-gutter lg:grid-cols-4">
                    @foreach ($results as $product)
                        <x-product-card :product="$product" />
                    @endforeach
                </div>
            @endif
        @endif
    </div>
@endsection