{block name='snippets-video'}
    {* NOTE: This is the OPC video snippet file required since JTL-Shop 5.3.x - it is also used for core video embeds. *}
    {et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
    {$captions = ''}
    {$transcript = ''}
    {block name='snippets-video-title'}
        {if !empty($title)}
            <label>{$title}</label>
        {/if}
    {/block}
    {block name='snippets-video-content'}
        <div class="{if !empty($class)}{$class}{/if}
        {if $responsive|default:false}embed-responsive embed-responsive-16by9{/if}"
             {if !empty($id)}id="{$id}"{/if}>
            {if $video->getType() === \JTL\Media\Video::TYPE_YOUTUBE}
                {$provider = 'youtube'}
            {elseif $video->getType() === \JTL\Media\Video::TYPE_VIMEO}
                {$provider = 'vimeo'}
            {else}
                {$provider = null}
            {/if}
            {if $provider === 'youtube' || $provider === 'vimeo'}
                {block name='snippets-video-content-yt-vimeo'}
                    <iframe data-src="{$video->getEmbedUrl()}"
                            class="needs-consent {$provider}"
                            width="{$video->getWidth()|default:'100%'}"
                            height="{$video->getHeight()|default:'auto'}"
                            {if !empty($title)}title="{$title}"{/if}
                            {if $video->isAllowFullscreen()}allowfullscreen{/if}>
                    </iframe>
                    {$previewImageUrl = $video->getPreviewImageUrl()}
                    <a href="#" class="trigger give-consent give-consent-preview"
                       data-consent="{$provider}"
                       role="button"
                       style="background-image:
                               url({$ShopURL}/templates/NOVA/themes/base/images/video/preview.svg)
                       {if !empty($previewImageUrl)},url({$previewImageUrl});{/if}">
                        {if $provider === 'youtube'}
                            {lang key='allowConsentYouTube'}
                        {else}
                            {lang key='allowConsentVimeo'}
                        {/if}
                    </a>
                {/block}
            {elseif $video->getType() === \JTL\Media\Video::TYPE_FILE}
                {block name='snippets-video-content-file'}
                    {if $shopIsAtLeast55}
                        {$captions = $video->getCaptionsURL()}
                        {$transcript = $video->getTranscript()}
                    {/if}
                    <video class="product-detail-video mw-100" preload="metadata"
                            {if $shopIsAtLeast55}
                                {if $video->isShowControls()}controls{/if}
                                {if $video->isLoop()}loop{/if}
                                {if $video->isAutoplay()}autoplay{/if}
                                {if $video->isMuted()}muted{/if}
                            {else}
                                controls
                            {/if}
                            {if !empty($video->getWidth())}width="{$video->getWidth()}"{/if}
                            {if !empty($video->getHeight())}height="{$video->getHeight()}"{/if}
                            {if !$video->isAllowFullscreen()}controlslist="nofullscreen"{/if}>
                        <source src="{$video->getEmbedUrl()}#t=0.001"
                                {if !empty($video->getFileFormat())}type="video/{$video->getFileFormat()}"{/if}>
                        {if $captions !== ''}
                            <track default kind="captions"
                                   srclang="{$video->getLocale()}"
                                   src="{$captions}"
                                   label="{$video->getLanguageName()}"/>
                        {/if}
                        {if $shopIsAtLeast55}
                            {lang key='videoTagNotSupported' section='errorMessages' printf=$video->getEmbedUrl()}
                        {else}
                            {lang key='videoTagNotSupported' section='errorMessages'}
                        {/if}
                    </video>
                {/block}
            {/if}
        </div>
    {/block}
    {block name='snippets-video-additional'}
        {if $shopIsAtLeast55 && $video->getType() === \JTL\Media\Video::TYPE_FILE}
            {$isPreview = $isPreview|default:false}
            {block name='snippets-video-additional-controls'}
                {if !$isPreview && !$video->isShowControls()}
                    <button tabindex="0" class="btn btn-secondary btn-sm opc-video-pause btn-pause"
                            onclick="togglePausePlayVideo()" title="{lang key='pause' section='aria'}">
                        <i class="fas fa-pause"></i>
                    </button>
                    {inline_script}
                        <script>
                            function togglePausePlayVideo() {
                                let button = $(event.currentTarget);
                                let fa = button.find('i');
                                let video = button.parent('.opc-Video').find('video');

                                if (fa.hasClass('fa-pause')) {
                                    video[0].pause();
                                    fa.removeClass('fa-pause').addClass('fa-play');
                                } else {
                                    video[0].play();
                                    fa.addClass('fa-pause').removeClass('fa-play');
                                }
                            }
                        </script>
                    {/inline_script}
                {/if}
            {/block}
            {block name='snippets-video-additional-transcript'}
                {if $transcript !== '' && $video->showTranscriptInPopup()}
                    <a href="#"
                       class="btn btn-secondary"
                       target="TranscriptWindow"
                       tabindex="0"
                       data-video-transcript="{$transcript|escape:'html'}">
                        {lang key='showVideoTranscriptPopup' section='media'}
                    </a>
                {/if}
                {$transcript = $video->getTranscript()}
                {if $transcript !== '' && $video->showTranscriptInPopup() === false}
                    <div class="card video-transcript">
                        <div class="card-header">
                            <button class="btn btn-secondary w-100"
                                    type="button"
                                    data-toggle="collapse"
                                    aria-expanded="false">
                                {lang key='showVideoTranscript' section='media'}
                            </button>
                        </div>
                        <div class="card-body collapse">
                            {$transcript}
                        </div>
                    </div>
                {/if}
            {/block}
        {/if}
    {/block}
{/block}