{# @sw-package framework #}

{% block component_pseudo_modal %}
    <div class="js-pseudo-modal-template">
        <div class="modal modal-lg fade"
             tabindex="-1"
             role="dialog"
             aria-modal="true"
             aria-hidden="true"
             aria-labelledby="pseudo-modal-title">
            <div class="modal-dialog">
                <div class="modal-content js-pseudo-modal-template-root-element">
                    {% block component_pseudo_modal_header %}
                        <div class="modal-header only-close">
                            {% block component_pseudo_modal_title %}
                                <div id="pseudo-modal-title" class="modal-title js-pseudo-modal-template-title-element h5"></div>
                            {% endblock %}

                            {% block component_pseudo_modal_close_btn %}
                                <button type="button"
                                        class="btn-close close"
                                        data-bs-dismiss="modal"
                                        aria-label="{{ 'global.default.close'|trans|striptags }}">
                                    {% block component_pseudo_modal_close_btn_content %}{% endblock %}
                                </button>
                            {% endblock %}
                        </div>
                    {% endblock %}

                    {% block component_pseudo_modal_body %}
                        <div class="modal-body js-pseudo-modal-template-content-element">
                        </div>
                    {% endblock %}
                </div>
            </div>

            <template class="js-pseudo-modal-back-btn-template">
                {# Back button will be rendered by `AjaxModalPlugin` if a `data-prev-url` is given in order to toggle between modals. #}

                {# Attributes `data-url` and `href` will be set automatically by `AjaxModalPlugin`. #}
                {% block component_pseudo_modal_back_btn %}
                    <button class="js-pseudo-modal-back-btn btn btn-outline-primary" data-ajax-modal="true" data-url="#" href="#">
                        {% block component_pseudo_modal_back_btn_content %}
                            {% sw_icon 'arrow-left' style { size: 'sm', class: 'me-1' } %}
                            {{ 'general.back'|trans }}
                        {% endblock %}
                    </button>
                {% endblock %}
            </template>
        </div>
    </div>
{% endblock %}