{% block element_vimeo_video %}
    {% set config = element.config %}
    {% set elementData = element.data %}

    {% set videoUrl = 'https://player.vimeo.com/video/' %}

    {% set locale = app.request.locale ?? 'en-GB' %}

    {# initialize with default values #}
    {% set queryParams = {
        color: config.color.value | replace({'#': ''}),
        dnt: config.doNotTrack.value,
        loop: config.loop.value,
        keyboard: 'false',
        texttrack: locale,
        fullscreen: 'true'
    } %}

    {% if config.autoplay.value == true %}
        {% set queryParams = queryParams | merge({ autoplay: 'true' }) %}
    {% endif %}

    {% if config.byLine.value == false %}
        {% set queryParams = queryParams | merge({ byline: 'false' }) %}
    {% endif %}

    {% if config.title.value == false %}
        {% set queryParams = queryParams | merge({ title: 'false' }) %}
    {% endif %}

    {% if config.portrait.value == false %}
        {% set queryParams = queryParams | merge({ portrait: 'false' }) %}
    {% endif %}

    {% if config.controls.value == false %}
        {% set queryParams = queryParams | merge({ controls: 'false' }) %}
    {% endif %}

    {% set videoUrl = videoUrl ~ config.videoID.value ~ '?' ~ (queryParams | url_encode) %}

    <div class="cms-element-vimeo-video">
        {% block element_vimeo_video_inner %}

            {% set iframeClass = 'cms-element-vimeo-video__video' %}

            {% if config.needsConfirmation.value == false %}
                <div class="cms-element-vimeo-video__container">
                    <iframe
                        class="{{ iframeClass }}"
                        src="{{ videoUrl }}"
                        title="{{ config.iframeTitle.value }}"
                        allowfullscreen
                    ></iframe>
                    <div class="position-absolute top-0 end-0 m-3 js-vimeo-link d-none">
                        <a
                            href="https://vimeo.com/{{ config.videoID.value }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="btn btn-dark btn-sm">
                            {{ 'component.cms.vimeo.watchUrlLabel'|trans|sw_sanitize }}
                        </a>
                    </div>
                </div>
            {% else %}
                {% set pluginConfiguration = {
                    cookieName: 'vimeo-video',
                    videoUrl: videoUrl,
                    iframeClasses: [ iframeClass ],
                    iframeTitle: config.iframeTitle.value,
                    btnClasses: [ 'btn', 'btn-outline-secondary' ],
                    backdropClasses: [ 'cms-element-vimeo-video__backdrop' ],
                    confirmButtonText: 'component.cms.vimeo.acceptButtonLabel'|trans,
                    overlayText: 'component.cms.vimeo.privacyNoticeText'|trans({
                        '%url%': path('frontend.cms.page', { id: config('core.basicInformation.privacyPage') }),
                        '%platform%': 'Vimeo'
                    })|raw
                } %}

                {% block element_vimeo_video_placeholder %}
                    <div class="cms-element-vimeo-video__placeholder"
                         data-cms-gdpr-video-element="true"
                         data-cms-gdpr-video-element-options="{{ pluginConfiguration|json_encode }}">

                        {% if elementData.media %}
                            {% sw_thumbnails 'cms-element-vimeo-video__placeholder' with {
                                media: elementData.media
                            } %}
                        {% endif %}
                    </div>
                {% endblock %}
            {% endif %}

        {% endblock %}
    </div>
{% endblock %}