@extends('layouts.main')

@section('page-id', '603919b7e07110a6a1d0cff0')

@section('body-class', 'sand')

@section('content')
<div class="section transparent">
  <div class="wide-container">
    <div>
      <div class="central-heading-wrapper mb-50">
        <h1 class="h1-2">{{ $category->name }}</h1>
        {!! $category->description !!}
      </div>
    </div>
    <div class="mt-60">
      <div class="product-categories columned">
        @foreach ($category->children as $child)
        <div class="product-category-wrapper">
          <div class="product-category mb-0">
            <div class="product-category-thumbnail-wrapper"><img
                src="{{ $child->thumbnail ? $child->asset_urls->thumbnail : url('images/Perennial-Ryegrass.jpg') }}"
                alt="" class="product-category-thumbnail"></div>
            <div class="product-category-content-wrapper sub-category">
              <h2 class="mb-20 mt-0">{{ $child->name }}</h2>
              <p class="mb-0">{{ $child->short_description }}</p>
            </div>
            <a href="{{ route('products.category.child', ['parentCategory' => $category->slug, 'childCategory' => $child->slug]) }}"
              class="product-category-link sub-category w-inline-block"><img
                src="{{ url('images/right-arrow-white.svg') }}" loading="lazy" alt=""
                class="product-category-chevron"></a>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
</div>
@endsection