{% comment %}
Description:
Snippet for displaying popup

Variables:
- wrapper_class: String, the wrapper class, can add z-index class here zi-1, zi-2, etc.
- vue_close_popup_on_overlay: String, function name for vue closing the popup from overlay, example handleClosePopupOverlay($event)
    On the function can check 
    if(!event.target.classList.contains('[the-popup-class]')) return;
    this.handleClosePopup();

    [the-popup-class] can be from {{ wrapper_class }}
    this.handleClosePopup();
- show_popup_model: String, vue model for showing popup
- fade_out_model: String, vue model for fading out popup.
- vue_close_popup: String, function name for vue closing the popup
- inner_class: String, class for .inner element, can add background color class. The width can be overiden from the parent snippet/section.
- popup_content: String, the popup content
- vue_popup_content: String, the content from vue
- disable_close_button: Boolean, hide close button 
{% endcomment %}

<div @click="{{ vue_close_popup_on_overlay }}" class="global-popup {{ wrapper_class }}" :class="{active: {{ show_popup_model }}, 'fade-out': {{ fade_out_model }}}">
    <div class="gp-inner {{ inner_class }} absolute">
        {% if disable_close_button %}
        {% else %}
            <button type="button" @click="{{ vue_close_popup }}" class="close absolute top-30 right-30 flex ai-center jc-center zi-1 {{ close_class }}">{{ settings.icon_close }}</button>
        {% endif %}
        {% if vue_popup_content == blank %}
            {{ popup_content }}
        {% else %}
            <div v-html="{{ vue_popup_content }}"></div>
        {% endif %}
    </div>
</div>