@php
  $locale = app()->getLocale();
  $num = str_pad($index + 1, 2, '0', STR_PAD_LEFT);
  $layout = ' collection-catalog__item--'.($index + 1);
  $featured = $index === 0 ? ' collection-catalog__item--featured' : '';
@endphp
<a href="{{ collection_url($collection) }}" class="collection-catalog__item reveal{{ $layout }}{{ $featured }}">
  <div class="collection-catalog__media">
    <img class="collection-catalog__image" src="{{ media_url($collection->cover_image) }}" alt="{{ $collection->getTranslation('name', $locale) }}" loading="lazy" decoding="async">
    <div class="collection-catalog__shade"></div>
    <span class="collection-catalog__index">{{ $num }}</span>
    <div class="collection-catalog__meta">
      <p class="collection-catalog__name">{{ $collection->getTranslation('name', $locale) }}</p>
      <p class="collection-catalog__cat">{{ $collection->category?->getTranslation('name', $locale) }}</p>
      @if($collection->getTranslation('description', $locale))
        <p class="collection-catalog__desc">{{ $collection->getTranslation('description', $locale) }}</p>
      @endif
    </div>
    <span class="collection-catalog__arrow" aria-hidden="true">
      <svg width="20" height="20" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.2"/></svg>
    </span>
  </div>
</a>