@extends('theme::layout')

@section('title', __('Produits porteurs'))
@section('description', __('Les produits porteurs de l\'offre du jeu'))

@section('main-class', 'product-page')

@section('content')
    <div class="container pb-5 pt-5">
        <div class="row mb-3">
            <div class="col">
                <h1 class="text-quad text-uppercase fw-bold">{{ __('Les produits porteurs') }}</h1>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="d-flex product-list justify-content-center flex-wrap">
                    @foreach ($rangeModelList as $rangeModel)
                        @foreach ($rangeModel->products as $productModel)
                            <div class="card product m-2">
                                <a class="card-body glightbox" href="{{ asset($productModel->picture) }}" role="button"
                                    aria-label="{{ __('Afficher l\'image en plein écran') }}" tabindex="0">
                                    <img class="card-img-top" src="{{ asset($productModel->picture) }}"
                                        title="{{ $productModel->picture_title }}" alt="{{ $productModel->picture_alt }}">
                                    <span class="h4 card-title">{{ Str::title($productModel->name) }}</span>
                                </a>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection