@extends('layouts.main')

@section('page-id', '603784f9456a5886b83253ab')

@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">Technical Library</h1>
          <p>More detail on a range of topics covering soil preparation to mixture selection and much more.</p>
        </div>
        <div>
          <div class="mb-0 w-form">
            <form class="article-search-form center" action="{{ route('learn.search') }}" method="GET">
              <div class="article-search-input-wrapper white"><img src="{{ url('images/search-icon-dark.svg') }}" loading="lazy" alt="" class="article-search-icon"><input type="text" class="article-search-input wide w-input" name="s" placeholder="e.g. Kale sowing guide"></div><input type="submit" value="Search" .." class="featured-text-link submit w-button">
            </form>
          </div>
        </div>
      </div>
      <div class="mt-60">
        <div class="technical-library-row">
@if (count($categories) > 0)
@foreach ($categories as $category)
          <div class="technical-library-column">
            <a href="{{ route('learn.technical-library.category', ['category' => $category->slug]) }}" class="technical-library-link w-inline-block"><img src="{{ $category->thumbnail ? $category->asset_urls->thumbnail : 'https://dummyimage.com/400x400/eaeaea/000.jpg&text=Placeholder+Image' }}" loading="lazy" alt="" class="technical-library-thumbnail">
              <div class="technical-library-text-wrapper">
                <div>{{ $category->title }}</div><img src="{{ url('images/right-chevron.svg') }}" loading="lazy" alt="">
              </div>
            </a>
          </div>
@endforeach
@endif
        </div>
      </div>
    </div>
  </div>
@endsection