<div class="large reveal text-center medium-text-left" id="popupNews" data-id="{{ popup.id }}" data-reveal>
    <div class="grid-x align-middle">
        {% if popup.video is not null and popup.video.path is not null and popup.video.path is not empty %}
            <div class="medium-12 large-auto video-popup-container">
                {% if 'youtube' in popup.video.path or 'youtu.be' in popup.video.path %}
                    <iframe class="video-popup" title="YouTube video player" frameborder="0"
                            src="{{ popup.video.path }}"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
                    </iframe>
                {% else %}
                    <video controls autoplay>
                        <source src="{{ popup.video.path }}" type="video/mp4">
                    </video>
                {% endif %}
            </div>
        {% elseif popup.image is not null %}
            <div class="medium-12 large-4 image-popup">
                <img src="{{ popup.image.path | imagine_filter('relative_widen_500_filter') }}" alt="">
            </div>
        {% endif %}
        <div class="medium-12 {% if popup.image is not null or popup.video.path is not null or popup.video.path is not empty %}large-7{% else %}large-12 only-text-popup{% endif %} popup-text-content">
            <h2>{{ popup.title|raw }}</h2>
            {{ popup.text|raw }}
            <div class="grid-x grid-margin-x grid-margin-y btn-popup">
                <div class="cell small-12 medium-6">
                    <button class="popup-hide text-center">{% trans %}popup.not_display{% endtrans %}</button>
                </div>
                <div class="cell small-12 medium-6">
                    <button class="popup-close text-center" data-close
                            aria-label="Close modal">{% trans %}popup.remember{% endtrans %}</button>
                </div>
            </div>
        </div>
    </div>
    <button class="close-button" data-close aria-label="Close Accessible Modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
