@php
    $embedUrl = $embedUrl ?? '';
    $youtubeId = $youtubeId ?? '';
    $title = $title ?? '';
    $wrapperClass = $wrapperClass ?? 'embed-responsive embed-responsive-4by3 mt-10';
    $poster = $poster ?? ($youtubeId !== '' ? 'https://i.ytimg.com/vi/'.$youtubeId.'/hqdefault.jpg' : '');
@endphp
@if (!empty($embedUrl))
    <div class="{{ $wrapperClass }} video-facade" data-video-facade data-embed-url="{{ $embedUrl }}" data-youtube-id="{{ $youtubeId }}">
        @if (!empty($poster))
            <img src="{{ $poster }}" alt="{{ $title }}" class="video-facade__thumb" loading="lazy" decoding="async">
        @else
            <div class="video-facade__thumb" style="background:linear-gradient(145deg,#1f3b64,#0d1525);min-height:100%;"></div>
        @endif
        <button type="button" class="video-facade__play" aria-label="{{ trans('public.play') ?? 'Play video' }}">
            <span class="video-facade__play-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" focusable="false">
                    <path d="M8 5.14v13.72c0 .79.87 1.27 1.54.84l11.14-6.86c.6-.37.6-1.27 0-1.64L9.54 4.3A1 1 0 0 0 8 5.14z"/>
                </svg>
            </span>
        </button>
    </div>
@endif
