{% extends '@Contao/content_element/_base.html.twig' %}
{% use '@Contao/component/_stylesheet.html.twig' %}

{#
    The "slider_settings" variable contains the settings for the content slider.
    You can use the merge function to customise the settings.

    Example:
        {% set slider_settings = slider_settings|merge({
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
        }) %}
#}

{% block content %}
    {% set slider_attributes = attrs()
        .addClass('swiper')
        .set('data-settings', slider_settings|json_encode)
        .mergeWith(slider_attributes|default)
    %}
    <div{{ slider_attributes }}>
        {% set slider_wrapper_attributes = attrs()
            .addClass('swiper-wrapper')
            .mergeWith(slider_wrapper_attributes|default)
        %}
        <div{{ slider_wrapper_attributes }}>
            {% block slides %}
                {% for element in nested_fragments %}
                    {% block slide %}
                        {% set slide_attributes = attrs()
                            .addClass('swiper-slide')
                            .mergeWith(slide_attributes|default)
                        %}
                        <div{{ slide_attributes }}>
                            {% block slide_inner %}
                                {{ content_element(element) }}
                            {% endblock %}
                        </div>
                    {% endblock %}
                {% endfor %}
            {% endblock %}
        </div>
        {% block controls %}
            {% if not as_editor_view %}
                {% set button_prev_attributes = attrs()
                    .addClass('swiper-button-prev')
                    .mergeWith(button_prev_attributes|default)
                %}
                <div{{ button_prev_attributes }}></div>
                {% set button_next_attributes = attrs()
                    .addClass('swiper-button-next')
                    .mergeWith(button_next_attributes|default)
                %}
                <div{{ button_next_attributes }}></div>
                {% set pagination_attributes = attrs()
                    .addClass('swiper-pagination')
                    .mergeWith(pagination_attributes|default)
                %}
                <div{{ pagination_attributes }}></div>
            {% endif %}
        {% endblock %}
    </div>
{% endblock %}

{% block script %}
    {% add 'swiper_js' to body %}
        {% set script_attributes = attrs()
            .setIfExists('nonce', csp_nonce('script-src'))
            .mergeWith(script_attributes|default)
        %}
        <script src="{{ asset('js/swiper-bundle.min.js', 'contao-components/swiper') }}"></script>
        <script{{ script_attributes }}>
            (function() {
                const swiper = document.querySelectorAll('.swiper');
                swiper.forEach (el => {
                    let opts = JSON.parse(el.getAttribute('data-settings') ?? '{}');

                    new Swiper(el, Object.assign({
                        {% block init_options %}
                            pagination: {
                                el: '.swiper-pagination',
                                clickable: true,
                            },
                            navigation: {
                                prevEl: '.swiper-button-prev',
                                nextEl: '.swiper-button-next',
                            },
                            {# Put custom options here #}
                        {% endblock %}
                    }, opts));
                });
            })();
        </script>
    {% endadd %}
{% endblock %}

{% block style %}
    {% add 'swiper_css' to stylesheets %}
        {% with {file: swiper_css_file|default(asset('css/swiper-bundle.min.css', 'contao-components/swiper'))} %}
            {{ block('stylesheet_component') }}
        {% endwith %}
    {% endadd %}
{% endblock %}
