@extends('layouts.app')

@section('title', $q !== '' ? 'Search: ' . $q : 'Search')

@section('content')
<section class="page-head">
  <h1>Search</h1>
  <p><a href="{{ route('home') }}">Home</a> / {{ $q !== '' ? count($products) . ' ' . \Illuminate\Support\Str::plural('result', count($products)) . ' for “' . $q . '”' : 'Search our store' }}</p>
</section>

<main class="container section">
  <form class="sr-form" action="{{ route('search') }}" method="get" role="search">
    <input type="search" name="q" value="{{ $q }}" placeholder="Search our store" aria-label="Search our store" minlength="2" maxlength="80" required>
    <button class="btn">Search</button>
  </form>

  @if (count($products))
    <div class="a-grid" id="grid"></div>
  @elseif ($q !== '')
    <div class="empty"><h2>No results</h2><p>We could not find anything for &ldquo;{{ $q }}&rdquo;. Check the spelling or try a broader word.</p>
      <a href="{{ route('collection') }}" class="btn">Browse all products</a></div>
  @else
    <p class="empty">Type a product name, brand or keyword above.</p>
  @endif
</main>
@endsection

@push('scripts')
@if (count($products))
<script>var PRODUCTS = @json($products);</script>
<script src="{{ asset_v('js/data.js') }}"></script>
<script>
document.getElementById('grid').innerHTML = PRODUCTS.map(Shop.card).join('');
Shop.paintAll();
</script>
@endif
@endpush