<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' %}
        <p>
            {% 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' : 'img-fluid',
                        'title' : element.image.title|default('')
                    }) }}
                </a>
            {% else %}
                {{ dedi_sylius_image_optimizer_for_image(element.image.image, element.image.alt|default(element.image.title ?? ''), {
                    'class' : 'img-fluid',
                    'title' : element.image.title|default('')
                }) }}
            {% endif %}
        </p>
    {% 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="youtube-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 %}
                    </div>
                </div>
                <div style="display:none" class="wrapper-iframe-youtube"></div>
            {% else %}
                <iframe type="text/html" width="100%" height="500px"
                        src="http://www.youtube.com/embed/{{ element.youtubeId }}?&autoplay=1"
                        frameborder="0"></iframe>
            {% 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>

                <div style="display:none">
                    <video width="100%" height="500px" controls="true" src="{{ element.video.video }}"></video>
                </div>
            </div>
        {% else %}
            <div class="block-video-wrapper">
                <video width="100%" height="500px" controls="true" src="{{ element.video.video }}"></video>
            </div>
        {% endif %}
    {% endif %}
</section>

{% if element.type == 'youtube' %}
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const wrapperImgYt = document.getElementById(`wrapper-img-youtube-{{ element.youtubeId }}`);
            const targetYT = document.querySelector(`#block-youtube-{{ element.youtubeId }} .wrapper-iframe-youtube`);
            const iframeYT = `<iframe type="text/html" width="100%" height="500px" id="yt-{{ element.youtubeId }}"
                              src="http://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 %}
