@extends('layouts.main')

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

@section('content')
  <section class="section peach">
    <div class="half-container center text-center">
      <h1 class="h1-2 mb-20">Species Guide</h1>
      <p>Take the time to explore our species guide. Click each species for more information.</p>
      <div class="species-guide-tablet-filter-wrapper">
        <div>Filter by:</div>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="wide-container">
      <div class="header-wrapper hide-tablet">
        <div class="header-line"></div>
        <div class="header-text-wrapper">
          <h3 class="header-text">Filter By</h3>
        </div>
        <div class="header-line"></div>
      </div>
      <div class="filter-button-row hide-tablet">
@if (count($categories) > 0)
@foreach ($categories as $category)
        <a href="{{ route('learn.species-guide.category', ['category' => $category->slug]) }}" class="filter-button {{ (isset($mainCategory) && $mainCategory->id === $category->id) ? 'w--current' : '' }}">{{ $category->name }}</a>
@endforeach
@endif
        <a href="{{ route('learn.species-guide') }}" class="filter-button {{ (isset($mainCategory) === false) ? 'w--current' : '' }}">All</a>
      </div>
      <div class="header-wrapper hide-tablet">
        <div class="header-line"></div>
      </div>
      <div class="species-row">
@if (count($species) > 0)
@foreach ($species as $s)
        <div class="species-item">
          <div>
            <div class="species-thumbnail-wrapper centered"><img src="{{ $s->asset_urls->seed_illustration }}" loading="lazy" alt="" class="species-small-thumbnail"></div>
          </div>
          <div class="species-title">{{ $s->name }}</div>
          <a href="{{ route('learn.species-guide.species', ['category' => $s->category->slug, 'species' => $s->slug]) }}" class="orange-link">More info</a>
        </div>
@endforeach
@else
        <p>No Species could be found.</p>
@endif
      </div>
    </div>
  </section>
@endsection