{% if referencePopup is defined %}
    {% set popups = popups|merge({referencePopup}) %}
{% endif %}
{% if popups|length > 0 %}
<div class="popup-wrapper">
    {% for popup in popups %}
        <div class="popup">
            <div class="popup-top">
                <div class="logo-container">
                    <div class="logo-img">
                        {% set logoImage = asset('img/'~popup.logoImage) %}
                        {% if referencePopup %}
                            {% set logoImage = asset('img/logo.png') %}
                            {% set prefix = 'references' %}
                        {% else %}
                            {% set prefix = 'popup' %}
                        {% endif %}
                        <img src="{{logoImage}}">
                    </div>
                </div>
                <div class="popup-close border-button">
                    <div class="icon cross-icon"></div>
                    {{"close"|trans|title}}
                </div>
            </div>
            <div class="popup-content">
                {% if popup.sliderImgArray["content"] is defined %}{% set sliderArray = popup.sliderImgArray["content"] %}
                {% else %}{% set sliderArray = popup.sliderImgArray %}{% endif %}
                {% if sliderArray|length > 0 %}
                    <div class="popup-slider-side">
                        <div class="popup-slider owl-carousel" data-carousel="{'items': 1, 'loop': true, 'nav': false, 'dots': false}">
                            {% for slideItem in sliderArray %}
                                <div class="popup-slider-item">
                                    <div class="main-img"><img src="{{asset('img/'~prefix~'/'~slideItem)}}" alt=""></div>
                                    {% if popup.reference is defined and popup.reference.countryCode %}
                                        <div class="country"><img src="{{asset('img/icon/flag-'~popup.reference.countryCode~'.svg')}}">{{popup.reference.countryCode|trans|capitalize}}</div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                        <div class="popup-slider-navigator slider-navigator">
                            <button class="slider-next arrow-left arrow-dark border-button" data-owl-prev=".popup-slider"></button>
                            <button class="slider-prev arrow-right arrow-dark border-button" data-owl-next=".popup-slider"></button>
                        </div>
                    </div>
                {% elseif referencePopup %}
                        <div class="popup-slider-side">
                            <img src="{{asset('img/references/'~popup.logoImage)}}" alt="">
                        </div>
                {% endif %}
                <div class="text-side">
                    <span class="popup-title">{{popup.title}}</span>
                    {% if popup.titleDescription is defined %}
                        <span class="description">{{popup.titleDescription}}</span>
                    {% endif %}
                    <hr>
                    <div class="text-content">
                        <span>{{popup.description}}</span>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endif %}