@extends('layouts.app')

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

@section('content')
<div class="bz-bar">
  <div class="bz-wrap">
    <h1>All Collections</h1>
    <nav><a href="{{ route('home') }}">Home</a><i></i><span>Collections</span></nav>
  </div>
</div>

<main class="bz-wrap bz-main">
  @if (count($collections))
    <div class="bz-grid" id="collections">
      @foreach ($collections as $i => $col)
        <a class="bz-card{{ $col['thumb'] ? ' cover' : '' }}" href="{{ collection_filter_url(['col' => [$col['slug']]]) }}">
          @if ($col['thumb'])<img src="{{ $col['thumb'] }}" alt="{{ $col['name'] }}" loading="{{ $i < 2 ? 'eager' : 'lazy' }}">@else<b aria-hidden="true">{{ mb_substr($col['name'], 0, 1) }}</b>@endif
          <span class="bz-over">
            <em>{{ $col['count'] ? $col['count'] . ' ' . \Illuminate\Support\Str::plural('piece', $col['count']) : 'Coming soon' }}</em>
            <strong>{{ $col['name'] }}</strong>
            @if ($col['text'])<small>{{ \Illuminate\Support\Str::limit($col['text'], 90) }}</small>@endif
            <u>Explore</u>
          </span>
        </a>
      @endforeach
    </div>
  @else
    <p class="empty">No collections available yet.</p>
  @endif

  @if (count($categories))
    <h2 class="bz-title">Shop by category</h2>
    <div class="bz-grid">
      @foreach ($categories as $cat)
        <a class="bz-card" href="{{ collection_filter_url(['cat' => [$cat['slug']]]) }}">
          @if ($cat['image'])<img src="{{ $cat['image'] }}" alt="{{ $cat['name'] }}" loading="lazy">@else<b aria-hidden="true">{{ mb_substr($cat['name'], 0, 1) }}</b>@endif
          <span class="bz-over">
            <em>{{ $cat['count'] ? $cat['count'] . ' ' . \Illuminate\Support\Str::plural('design', $cat['count']) : 'Explore' }}</em>
            <strong>{{ $cat['name'] }}</strong>
            <u>Explore</u>
          </span>
        </a>
      @endforeach
    </div>
  @endif
</main>
@endsection