@if(isset($domainSelected))
    <div class="d-flex flex-column align-items-center justify-content-center">
        <div class="h-auto d-flex w-100 flex-row justify-content-around mt-5 mb-5 p-5">
            @if(!empty($notifiedMarket) && $notifiedMarket != 0)
                <h3 class="bg-primary w-25 d-flex justify-content-center align-items-center text-white p-4 rounded">
                    {{$notifiedMarket === 1 ? $notifiedMarket . ' Marché notifié' : $notifiedMarket . ' Marchés notifiés'}}
                </h3>
            @endif
            @if(empty($activeMarkets) && $activeMarkets != 0 && $startDate)
                <h3 class="w-25 d-flex justify-content-center p-4 rounded text-center">
                    Il n'y a pas de marché notifié pour la période de référence choisie.
                </h3>
            @endif
            @if(empty($activeMarkets) && $startDate === null)
                <h3 class="w-25 d-flex justify-content-center p-4 rounded text-center">
                    Merci de sélectionner une date de début pour afficher les marchés notifiés.
                </h3>
            @endif
            @if(!empty($activeMarkets) && $activeMarkets != 0)
                <h3 class="bg-primary w-25 d-flex justify-content-center align-items-center text-white p-4 rounded">
                    {{$activeMarkets === 1 ? $activeMarkets . ' Marché actif' : $activeMarkets . ' Marchés actifs'}}
                </h3>
            @endif
            @if(empty($activeMarkets) && $endDate)
                <h3 class="w-25 d-flex justify-content-center p-4 rounded text-center">
                    Il n'y a pas de marché actif pour la période de référence choisie.
                </h3>
            @endif
            @if(empty($activeMarkets) && $endDate === null)
                <h3 class="w-25 d-flex justify-content-center p-4 rounded text-center">
                    Merci de sélectionner une date de fin pour afficher les marchés actifs.
                </h3>
            @endif
        </div>
        <div class="h-auto w-75 d-flex justify-content-center align-items-center flex-column mt-5 mb-5 pt-5 pb-5">
            <x-charts.renewalMarketTab/>
        </div>
        <div class="h-auto d-flex justify-content-center align-items-center flex-column mt-5 mb-5 pt-5 pb-5"
             style="width: 60%">
            <x-charts.marketByAmountChart/>
        </div>
        <div class="h-auto w-75 d-flex justify-content-center align-items-center flex-column mt-5 mb-5 pt-5 pb-5">
            <x-charts.marketByAmountTab/>
        </div>
    </div>
@else
    <div class="d-flex flex-column align-items-center justify-content-center">
        <h3 class="w-75 d-flex justify-content-center p-4 rounded">
            Merci de choisir un domaine pour afficher les données
        </h3>
    </div>
@endif