{% extends '@nucleus/partials/particle.html.twig' %}
{% block particle %}
    <div class="{{ particle.class|e }} g-testimonials" data-testimonials-id="{{ id }}" data-testimonials-autoplay="{% if particle.autoplay == "enabled" %}true{% else %}false{% endif %}" data-testimonials-loop="{% if particle.loop == "enabled" %}true{% else %}false{% endif %}" data-testimonials-timeout="{{ particle.autoplayTimeout }}" data-testimonials-speed="{{ particle.speed }}">
        {% if particle.title %}
            <div class="g-testimonials-header">
                {% if particle.title %}
                    <div class="g-testimonials-title">
                        {{ particle.title|raw }}
                    </div>
                {% endif %}
            </div>
        {% endif %}

        <!-- Swiper -->
        <div class="g-testimonials-container" {% if gantry.page.direction == 'rtl' %}dir="rtl"{% endif %}>
            <div class="g-testimonials-pagination">
                {% if particle.nav == 'enabled' %}
                    <div class="swiper-button-prev">
                        <i class="fa fa-angle-up"></i>
                    </div>
                {% endif %}

                {% if particle.dots == 'enabled' %}
                    <div class="swiper-pagination"></div>
                {% endif %}

                {% if particle.nav == 'enabled' %}
                    <div class="swiper-button-next">
                        <i class="fa fa-angle-down"></i>
                    </div>
                {% endif %}
            </div>

            <div class="swiper-wrapper testimonial-wrapper" style="height: {{ particle.height|default('700px') }};">

                {% if not particle.source or particle.source == 'particle' %}
                        {% for testimonial in particle.testimonial %}
                            <div class="swiper-slide">
                                <div class="g-testimonials-image">
                                    <img src="{{ url(testimonial.photo) }}" alt="{{ testimonial.alttext|default(testimonial.content|truncate_text(40)) }}" />
                                </div>

                                <div class="g-testimonials-wrapper">
                                    {% if testimonial.content %}
                                        <h2 class="g-testimonials-content">
                                            {{ testimonial.content }}
                                        </h2>
                                    {% endif %}

                                    {% if testimonial.author %}
                                        <p class="g-testimonials-author">
                                            – {{ testimonial.author }}
                                            {% if testimonial.position %}
                                            {{ testimonial.position }}
                                            {% endif %}
                                        </p>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}

                {% else %}
                    {% include '@particles/testimonials-' ~ gantry.platform.name ~ '.html.twig' ignore missing %}
                {% endif %}

            </div>
            <div class="mobile-nav-wrapper">
                <div class="swiper-button-prev">
                    <i class="fa fa-angle-left"></i>
                </div>
                <div class="swiper-button-next">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="gantry-theme://css/swiper.min.css" />
{% endblock %}

{% block javascript_footer %}
    {% do gantry.load('jquery') %}
    {% do gantry.document.addScript(url('gantry-theme://js/swiper.min.js'), 10, 'footer') %}
    {% do gantry.document.addScript(url('gantry-theme://js/testimonials.init.js'), 10, 'footer') %}
{% endblock %}