@if ($index === 0 && isset($livestream))
    <div class="w-full max-w-6xl">
        <div class="md:flex w-full">
            <div class="flex-3">
                @if ($livestream->video_id)
                    <youtube-player :content='@json($livestream)' uuid="livestream-{{ $livestream->id }}" :live="true" dusk="player-livestream-{{ $livestream->id }}"></youtube-player>
                @else 
                    <div class="pb-50p relative z-2 overflow-hidden place-items-center hidden md:grid">
                        <img src="{{ $livestream->banner ? $livestream->banner->large : '/images/livestream_default.jpg' }}" class="absolute" />
                    </div>
                @endif
            </div>

            @if ($livestream->chat_mode !== 'disabled')
                <chat mode="{{ $livestream->chat_mode }}" 
                    room="{{ $livestream->chat_room }}" 
                    :moderator="{{ auth()->check() ? (auth()->user()->can('moderate', $livestream) ? 'true' : 'false' ) : 'false' }}" 
                    :moderators='@json($livestream->moderators)'
                    :livestream='@json($livestream)'
                ></chat>
            @endif
        </div>
    </div>
    <div class="border-t-2 border-gray-300 mb-8 md:mb-16 w-full max-w-6xl">
        <livestream :item='@json($livestream)' :hide-links="true"></livestream>
    </div>
@endif