@extends('layouts.app')

@section('title', 'All Collections')

@section('content')
@php $arrow = '<svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>'; @endphp
<div class="fq-band">
  <div class="container">
    <nav class="pb-crumb" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a><i>/</i><span>Collections</span></nav>
  </div>
</div>

<main class="container cx-main">
  <h1 class="sr-only">All collections</h1>

  @if (count($collections))
    <div class="cx-grid" id="collections">
      @foreach ($collections as $i => $col)
        <a class="cx-card" href="{{ collection_filter_url(['col' => [$col['slug']]]) }}">
          <span class="cx-img">
            @if ($col['thumb'])<img src="{{ $col['thumb'] }}" alt="{{ $col['name'] }}" loading="{{ $i < 3 ? 'eager' : 'lazy' }}" onerror="this.remove()">@else<b aria-hidden="true">{{ mb_substr($col['name'], 0, 1) }}</b>@endif
          </span>
          <span class="at-cap"><b>{{ $col['name'] }}</b><em>({{ $col['count'] }} {{ $col['count'] === 1 ? 'item' : 'items' }})</em></span>
          @if ($col['text'])<span class="cx-text">{{ \Illuminate\Support\Str::limit($col['text'], 90) }}</span>@endif
        </a>
      @endforeach
    </div>
  @else
    <p class="empty">No collections available yet.</p>
  @endif

  @if (count($categories))
    <h2 class="pdx-h center cx-title">Shop by category</h2>
    <div class="cx-grid">
      @foreach ($categories as $cat)
        <a class="cx-card" href="{{ collection_filter_url(['cat' => [$cat['slug']]]) }}">
          <span class="cx-img">
            @if ($cat['image'])<img src="{{ $cat['image'] }}" alt="{{ $cat['name'] }}" loading="lazy" onerror="this.remove()">@else<b aria-hidden="true">{{ mb_substr($cat['name'], 0, 1) }}</b>@endif
          </span>
          <span class="at-cap"><b>{{ $cat['name'] }}</b><em>({{ $cat['count'] }} {{ $cat['count'] === 1 ? 'item' : 'items' }})</em></span>
        </a>
      @endforeach
    </div>
  @endif
</main>
@endsection