@extends('layouts.app')
@section('content')
    <div>
        <div
            class="relative h-[60vh] w-full bg-cover bg-center text-white"
            style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ asset('img/competitions/equipes/hero.jpg') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-5xl font-bold mb-2">Nos équipes</h1>
                </div>
            </div>
        </div>

        @forelse ($teams as $team)
            <div
                class="relative h-[60vh] w-full bg-cover bg-center text-white"
                style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ $team->image_url }}');"
            >
                <div class="flex items-center justify-center h-full text-center p-4">
                    <div>
                        <h1 class="text-5xl font-bold mb-2">{{ $team->name }}</h1>
                    </div>
                </div>
            </div>
        @empty
            <div class="h-[40vh] justify-center items-center flex">
                <p class="text-center text-4xl font-semibold">Aucune équipe de compétition à afficher.</p>
            </div>
        @endforelse
    </div>
@endsection