@php

    if ($content->header) {
        $header = $content->header;
    } else { 
        if ($content->show_past && $content->show_future) {
            $header = 'All Livestreams';
        } else if ($content->show_past) {
            $header = 'Completed Livestreams';
        } else {
            $header = 'Upcoming Livestreams';
        }
    }

@endphp

<div class="flex flex-col relative w-full max-w-6xl">

    <div class="md:flex">
        <div class="flex-1"></div>
        <div class="flex-2 flex justify-center livestream-list-container">
            <div class="my-4 absolute right-0 hidden md:block h-8 overflow-visible px-2 text-primary text-4xl"><fa-icon icon="fab fa-youtube"></fa-icon></div>
            <div class="px-4 md:px-8 w-full text-block">
                <h1>{{ $header }}</h1>
            </div>
        </div>
    </div>

    <div class="md:flex">
        <div class="flex-1"></div>
        <div class="flex-2 flex justify-center">
            <div class="w-full text-block px-4 md:px-8">
                <timezone-display></timezone-display>
            </div>
        </div>
    </div>

    <div class="">
        <paginator url="livestreams" 
            model="livestream" 
            :input-options='@json(array_merge($content->toArray(), ['exclude_id' => isset($livestream) ? $livestream->id : null]))'
            dusk="paginator-{{ Illuminate\Support\Str::kebab($header) }}"
            :show-search="true"
            paginator-id="livestream-list-{{ $content->id }}"
        >
            <template #empty>
                There are no {{ $header }} to view. 
            </template>
        </paginator>
    </div>

</div>