<section class="block-section">
    {% if element.type == 'pdf' %}
        <embed src="{{ asset(element.pdf) }}#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="500px">
    {% elseif element.type == 'image' %}
        <div>
            {% if element.image.link is not empty %}
                <a href="{{ element.image.link }}">
                    {{ dedi_sylius_image_optimizer_for_image(element.image.image, element.image.alt|default(element.image.title ?? ''), {
                        'class' : 'w-100',
                        'title' : element.image.title|default('')
                    }) }}
                </a>
            {% else %}
                {{ dedi_sylius_image_optimizer_for_image(element.image.image, element.image.alt|default(element.image.title ?? ''), {
                    'class' : 'w-100',
                    'title' : element.image.title|default('')
                }) }}
            {% endif %}
        </div>
    {% elseif element.type == 'youtube' %}
        <div class="block-video-wrapper" id="block-youtube-{{ element.youtubeId }}" data-youtube="{{ element.youtubeId }}">
            {% if element.youtubeImage is not null %}
                <div class="wrapper-img-youtube" id="wrapper-img-youtube-{{ element.youtubeId }}">
                    <img class="w-100" src="{{ element.youtubeImage }}" style="cursor:pointer">
                    <div class="icon-content">
                        {% if element.youtubeTitle is defined and element.youtubeTitle.title is not null %}
                            <div class="wrapper-title display-1 {{ element.youtubeTitle.class|default('dark') }}">{{ element.youtubeTitle.title }}</div>
                        {% endif %}
                        {% include ['@SyliusShop/Icons/play.html.twig', '@SyliusShop/Icons/fontawesome.html.twig'] with { 'icon': 'play' } %}
                    </div>
                </div>
                <div style="display:none" class="wrapper-iframe-youtube"></div>
            {% else %}
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" type="text/html"
                            src="//www.youtube.com/embed/{{ element.youtubeId }}?&autoplay=1"
                            frameborder="0"></iframe>
                </div>
            {% endif %}
        </div>
    {% elseif element.type == 'video' %}
        {% if element.video.image is defined and element.video.image is not empty %}
            <div class="block-video-wrapper">
                <div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'; this.nextElementSibling.play()">
                    <img class="w-100" src="{{ element.video.image }}" style="cursor:pointer">
                    <div class="icon-content">
                        {% include ['@SyliusShop/Icons/play.html.twig', '@SyliusShop/Icons/fontawesome.html.twig'] with { 'icon': 'play' } %}
                    </div>
                </div>

                <div style="display:none">
                    <div class="embed-responsive embed-responsive-16by9">
                        <video class="embed-responsive-item" controls="true" src="{{ element.video.video }}"></video>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="block-video-wrapper">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" controls="true" src="{{ element.video.video }}"></video>
                </div>
            </div>
        {% endif %}
    {% endif %}
</section>

{% if element.type == 'youtube' %}
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        const wrappersImgYt = document.querySelectorAll('.wrapper-img-youtube');

        if (wrappersImgYt.length === 0) {
          return;
        }

        Array.from(wrappersImgYt).forEach(wrapperImgYt => {
          const targetYT = wrapperImgYt.parentNode.querySelector('.wrapper-iframe-youtube');
          const iframeYT = `<iframe type="text/html" width="100%" height="500px" id="yt-{{ element.youtubeId }}"
                    src="//www.youtube.com/embed/{{ element.youtubeId }}?&autoplay=1"
                    allow="autoplay" frameborder="0" allow="autoplay"></iframe>`;

          wrapperImgYt.addEventListener('click', function(){
            targetYT.innerHTML = iframeYT;
            this.nextElementSibling.style.display = 'block';
            this.style.display = 'none';
          })
        });
      });
    </script>
{% endif %}
