@php $locale = app()->getLocale(); @endphp
@extends('layouts.app')

@section('title', 'Çisa Salotti — '.__('site.featured.title'))

@section('content')
<main>
  <section class="page-hero">
    <img class="page-hero__image" src="{{ asset('images/collections/porto/cover.jpg') }}" alt="" loading="eager">
    <div class="page-hero__overlay"></div>
    <div class="page-hero__content container">
      <p class="section-label">{{ __('site.featured.label') }}</p>
      <h1 class="display-lg">{{ __('site.featured.title') }}</h1>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="featured-page-grid">
        @foreach($featured as $index => $item)
          @php $collection = $item->collection; @endphp
          @continue(!$collection)
          <a href="{{ collection_url($collection) }}" class="featured-collection reveal">
            <div class="featured-collection__media">
              <img
                class="featured-collection__image"
                src="{{ media_url($collection->cover_image) }}"
                alt="{{ $collection->getTranslation('name', $locale) }}"
                loading="lazy"
                decoding="async"
              >
              <div class="featured-collection__shade"></div>
              <span class="featured-collection__index">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
              <div class="featured-collection__meta">
                <p class="featured-collection__name">{{ $collection->getTranslation('name', $locale) }}</p>
                @if($collection->category)
                  <p class="featured-collection__cat">{{ $collection->category->getTranslation('name', $locale) }}</p>
                @endif
              </div>
            </div>
          </a>
        @endforeach
      </div>
    </div>
  </section>
</main>
@endsection