{#

Element ID: Element12
Element Name: Testimonials

#}

<section id="" class="testimonials">
    <div class="container testimonials__container">
        <div class="text-align-center">
            <h2 class="text-uppercase h1">{{ element.title }}</h2>
        </div>
        <div class="testimonials__wrap">
            <a href="#" class="btn btn--hollow-gray btn__arrow-gray testimonials__previous">
                <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-left"></use></svg>
            </a>
            <div class="owl-carousel" id="js-testimonials">
                {% for testimonial in element.testimonials %}
                <div class="testimonial">
                    <div class="testimonial__profile">
                        <div class="profile-image">
                            <img src="{{ Image(testimonial.user_photo).src }}" />
                        </div>
                        <div class="profile-text">
                            <h3>{{testimonial.title}}</h3>
                            <h4 class="h5">{{ testimonial.user_role }}</h4>
                        </div>

                    </div>
                    <div class="testimonial__content">
                        <div class="quote-img">
                        </div>
                        <div class="quote">
                            <p class="h4">{{ testimonial.short_text }}</p>
                            <a href="{{ element.testimonials_link }}#{{ testimonial.id }}" class="btn btn--blank small">read more</a>
                        </div>
                    </div>
                </div>
                {% endfor %}

            </div>
            <a href="#" class="btn btn--hollow-gray btn__arrow-gray testimonials__next">
                <svg class="arrow-right"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-right"></use></svg>
            </a>
        </div>
    </div>
</section>