@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/salle/hero.png') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-5xl font-bold mb-2">Calendrier des compétitions</h1>
                </div>
            </div>
        </div>

    @if($calendar !== "")
            <section class="section is-fullheight">
                <div class="container">
                    <div class="flex self-center w-full justify-center mt-4">
                        <img src="{{ $calendar }}" alt="Calendrier des compétitions">
                    </div>
                </div>
            </section>
        @else
            <section class="section is-large">
                <div class="container">
                    <p class="text-center mt-6 text-xl font-semibold">Le calendrier des compétitions n'a pas encore été publié</p>
                </div>
            </section>
        @endif
    </div>
@endsection