{% macro popup(object) %}
    <div class="modal fade" id="popup-template-{{ object.id }}" style="padding-right: 15px;" aria-hidden="true">
        <div class="modal-dialog popup">
            <div class="modal-content popup-border-radius">
                <div class="popup-border-radius popup-container">
                    <span class="cross-popup" onclick="$('#popup-template-{{ object.id }}').modal('hide')">×</span>
                    <a style="margin: 0 0 25px 0;{{ object.link is not empty and "top" in object.linkPosition ? '' : 'display: none' }}"
                       class="popup-template-link-top" href="{{ object.link }}" target="_blank">
                        {{ object.labelLink }}
                    </a>
                    <h2 class="popup-template-title">
                        {{ object.title }}
                    </h2>
                    <div class="popup-container-content">
                        <div style="flex: 1;{{ object.image is not empty ? '' : 'display:none' }}">
                            <img class="popup-image" style="max-width: 100%" src="{{ object.image is not empty ? asset(object.image) : '' }}" alt="Image popup">
                        </div>
                        <div style="flex: 2;" class="popup-message">
                            {{ object.text|raw }}
                        </div>
                    </div>
                    <a style="margin:25px 0 0 0;{{ object.link is not empty and "bottom" in object.linkPosition ? '' : 'display: none' }}"
                       class="popup-template-link-bottom" href="{{ object.link }}" target="_blank">
                        {{ object.labelLink }}
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro multiple_popup(popups) %}
    <div id="container-popups">
        <span class="cross-popup" id="btn-close-all">Tout fermer</span>
        <div>
            {% for popup in popups %}
                {{ _self.popup(popup) }}
            {% endfor %}
        </div>
    </div>
{% endmacro %}