<div class="w-full md:flex relative items-center {{ !$content->full_width ? 'print:grid print:grid-cols-2' : 'print:block' }} avoid-page-break max-w-6xl">

    <div class="flex-2 {{ !$content->full_width  && ($content->header && $content->body) ? 'md:relative w-full pb-4 md:pb-0 print:h-full flex-2' : 'relative w-full' }} min-h-[220px] {{ $content->full_width ? 'md:min-h-[300px] lg:min-h-[460px]' : 'md:min-h-[264px] lg:min-h-[408px]' }} print:min-h-0">
        <youtube-player class="block w-full relative pb-video {{ $content->full_width ? ( $content->body ? 'md:pb-40p' : 'md:pb-33p' ) : '' }}" :content='@json($content)' uuid="{{ $content_element->uuid }}" :shadow="{{ $content->full_width ? 'false' : 'true' }}"></youtube-player>
    </div>

    @if (!$content->full_width && $content->body)
        <div class="flex-1 relative flex print:block items-center justify-center bg-highlight py-8 print:border-b-0 md:border-b-4 md:border-primary {{ !$content->full_width ? 'px-8 md:-ml-8 md:pl-16 md:pr-8' : '' }}">
            <div class="text-block relative {{ $content->style ? 'pt-8' : '' }}">

                <div class="flex print:block items-center">

                    @if ($content->header)
                        <h{{ $header ? '1' : '2'}} class="flex-1">{{ $content->header }}</h{{ $header ? '1': '2' }}>
                        <div class="print:hidden hidden md:block cp h-8 -mr-4 overflow-visible px-2 relative text-gray-200 text-4xl" @click="queueVideoId('{{ $content_element->uuid }}')"><fa-icon icon="fab fa-youtube"></fa-icon></div>
                    @endif
                    
                </div>

                <div class="body">
                    {!! $content->body !!}
                </div>

                <div class="flex link print:hidden mt-4" @click="queueVideoId('{{ $content_element->uuid }}')">
                    <div class=""><fa-icon icon="fab fa-youtube"></fa-icon></div>
                    <div class="pl-2">Play Video</div>
                </div>

                @if ($dash)
                    <img src="/images/dash.svg" class="text-block-dash fill-current" alt="closing text dash" />
                    @php
                        $dash = false;
                    @endphp
                @endif
            </div>
        </div>
    @endif

</div>

@if ($content->full_width && ($content->header || $content->body))

    <div class="flex justify-center relative z-4 -mt-4 print:mt-0 md:-mt-16">
        <div class="bg-highlight p-8 md:px-16 mt-4 w-auto print:shadow-none md:shadow-lg md:rounded-b-lg">

            <div class="text-block print:max-w-prose">
                <div class="flex items-center print:block">

                    @if ($content->header)
                        <h1 class="flex-1">{{ $content->header }}</h1>
                    @endif

                    @if (!$content->full_width)
                        <div class="print:hidden hidden md:block cp h-8 -mr-4 overflow-visible px-2 relative text-gray-200 text-4xl" @click="queueVideoId('{{ $content_element->uuid }}')"><fa-icon icon="fab fa-youtube"></fa-icon></div>
                    @endif
                </div>

                <div class="body">{!! $content->body !!} </div>

                <div class="flex link print:hidden mt-4" @click="queueVideoId('{{ $content_element->uuid }}')">
                    <div class=""><fa-icon icon="fab fa-youtube"></fa-icon></div>
                    <div class="pl-2">Play Video</div>
                </div>

                @if ($dash)
                    <img src="/images/dash.svg" class="text-block-dash fill-current" alt="closing text dash" />
                    @php
                        $dash = false;
                    @endphp
                @endif
            </div>

        </div>
    </div>

@endif
