@extends('layouts.main')

@section('page-id', '606b4b12596b15f155b3fd8e')

@section('content')
  <section class="section peach">
    <div class="wide-container">
      <div class="search-heading-wrapper">
        <h1 class="mt-0 mb-30">Product Search</h1>
        <div class="mb-0 w-form">
          <form class="article-search-form center" action="{{ route('products.search') }}" method="GET">
            <div class="article-search-input-wrapper"><img src="{{ url('images/search-icon-dark.svg') }}" loading="lazy" alt="" class="article-search-icon"><input type="text" class="article-search-input w-input" name="s" placeholder="Filter by product" value="{{ $searchTerm }}"></div><input type="submit" value="Search" class="featured-text-link submit w-button">
          </form>
        </div>
      </div>
      <div class="search-wrapper">
        <div class="search-results-wrapper">
@foreach ($products as $product)
          <div class="search-result-item">
            <div class="castle-mixture search">
              <div class="castle-mixture-top">
                <div class="castle-mixture-top-left full-width">
                  <div class="search-results-product-thumbnail-wrapper"><img src="{{ $product->asset_urls->thumbnail }}" loading="lazy" alt="" class="search-results-product-thumbnail mixture"></div>
                  <div class="castle-mixture-content-wrapper">
                    <h3 class="castle-mixture-name mb-0">{{ $product->name }}</h3>
                    <div class="mb-10"><strong>{{ $product->sub_title }}</strong></div>
                    <div>{{ $product->description }}</div>
                  </div>
                </div>
              </div>
              <a href="{{ $product->link }}" class="castle-mixture-link w-inline-block">
                <div>View Product</div>
              </a>
            </div>
          </div>
@endforeach
        </div>
      </div>
    </div>
  </section>
@endsection