@php
    $campaign_status = getCampaignStatus();
    $notice_message = getDisplayedMessage($page??null);
@endphp
{{ $nav }}
@if($campaign_status['pre_campaign'] && !$campaign_status['pre_live_campaign'])
    @once
        @push('script')
            <script>$(function(){ $('.toast').toast('show') })</script>
        @endpush
    @endonce
    <div role="alert" aria-live="assertive" aria-atomic="true" class="toast bg-danger" data-autohide="false"
         style="max-width: unset; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index:99999">
        <div class="toast-body text-center py-1 align-items-center d-flex flex-row-reverse justify-content-between text-center toast-body">
            <button type="button" class="ml-2 close default-font-color" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <small><i class="fas fa-exclamation-triangle"></i> <strong class="mr-auto">Campaign not started yet.</strong> Share this URL with caution</small>
        </div>
    </div>
@endif

<div class="container-fluid container-lg p-0 h-auto d-block">

    <div class="w-100 h-auto position-relative" style="padding-bottom: {{$bottom_ui? '8' : '1'}}rem">
        {{ $masthead }}
        @if($top_right_ui)
            <section class="top_right_section z-1">
                {{ $top_right_ui }}
            </section>
        @endif
        <div class="main-section position-relative mx-auto">
            @if($notice_message)
                <div class="bold px-3 py-3 text-center mx-auto mt-4 mb-4">
                    {!! $notice_message !!}
                </div>
            @endif

            @if($campaign_status['campaign_active'])
                {{ $slot }}
            @elseif( ($page=='login' || $page=='register') && $campaign_status['pre_live_campaign'])
                {{ $slot }}
            @elseif( $page!=='gamification' && $campaign_status['redeem_active'] )
                {{ $slot }}
            @endif
        </div>

    </div>
</div>



@if($bottom_ui)
    <section class="bottom_section bottom-gradient position-fixed w-100 z-1" style="bottom:0;">
        {{ $bottom_ui }}
    </section>
@endif


{{$footer}}

@include('components.main.popup.custom')
@include('components.main.popup.message')