@if ($banner)
    @if ($banner->type === 'image')
        <div class="bg-cover bg-center min-h-full lg:min-h-half flex items-center" style="background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('{{ Storage::disk('s3')->url($banner->filename) }}')">
            <div class="w-full px-4 lg:px-0">
                <h2 class="font-sans text-white text-base text-center uppercase">The Tech Capital</h2>
                <h2 class="font-altgothic text-4xl text-white uppercase text-center mb-4">{{ $banner->title }}</h2>
                <h2 class="font-serif text-xl text-white text-center mb-4">{{ $banner->sub_title_1 }}</h2>
                @if ($banner->sub_title_2)
                    <h2 class="font-serif text-xl text-white text-center mb-4">{{ $banner->sub_title_2 }}</h2>
                @endif
                @if ($page->starts_at->format('F d Y') === $page->ends_at->format('F d Y'))
                    <h2 class="font-altgothic text-4xl text-white uppercase text-center mb-4">{{ $page->starts_at->format('F d Y')}}</h2>
                @else
                    <h2 class="font-altgothic text-4xl text-white uppercase text-center mb-4"><span class="block lg:inline">{{ $page->starts_at->format('d')}}</span><span class="block text-lg lg:text-4xl lg:inline"> - </span><span class="block lg:inline">{{$page->ends_at->format('d') }} {{$page->ends_at->format('F Y')}}</span></h2>
                @endif
                <p class="text-center"><a href="{{ $banner->cta_url }}" class="inline-block p-2 pl-4 pr-4 bg-techcapital-red border border-techcapital-red text-white uppercase font-altgothic">{{ $banner->cta_title }}</a></p>
            </div>
        </div>
    @else
        <div class="relative flex items-center">
            <video autoplay muted playsinline style="pointer-events: none;" class="w-full">
                <source src="{{ Storage::disk('s3')->url($banner->filename) }}" type="video/mp4">
            </video>
            <div class="absolute top-0 left-0 right-0 bottom-0 w-full z-50 flex items-center" 
            style="background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5))">
                <div class="w-full px-4 lg:px-0">
                    <h2 class="text-sm lg:text-base font-sans text-white text-center uppercase">The Tech Capital</h2>
                    <h2 class="font-altgothic text-xl lg:text-4xl text-white uppercase text-center lg:mb-4">{{ $banner->title }}</h2>
                    <h2 class="hidden lg:block text-xl font-serif text-white text-center mb-4">{{ $banner->sub_title_1 }}</h2>
                    @if ($banner->sub_title_2)
                        <h2 class="hidden lg:block font-serif text-xl text-white text-center mb-4">{{ $banner->sub_title_2 }}</h2>
                    @endif
                    @if ($page->starts_at->format('F d Y') === $page->ends_at->format('F d Y'))
                        <h2 class="font-altgothic text-lg lg:text-4xl text-white uppercase text-center mb-4">{{ $page->starts_at->format('F d Y')}}</h2>
                    @else
                        <h2 class="font-altgothic text-lg lg:text-4xl text-white uppercase text-center mb-4">{{ $page->starts_at->format('d')}} - {{$page->ends_at->format('d') }} {{$page->ends_at->format('F Y')}}</h2>
                    @endif
                    <p class="text-center"><a href="{{ $banner->cta_url }}" class="inline-block p-2 pl-4 pr-4 bg-techcapital-red border border-techcapital-red text-white uppercase font-altgothic">{{ $banner->cta_title }}</a></p>
                </div>
            </div>
        </div>
    @endif
@endif