{% load thumbnail %}
<div class="container-fluid home-testimonials mt-5 mb-5">
    <div class="background row"></div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="top-coma">
                    <i class="fa fa-quote-right text-primary"></i>
                </div>
            </div>
            <div class="col-12 text-center mt-5">
                <h1 class="mb-3">What our customers say</h1>
            </div>
            <div class="col-md-8 offset-md-2 text-center mb-4">
                <ul id="testimonial-slider">
                    {% for testimonial in testimonials %}
                        <li>
                            <div class="col-12 testimonial-content mb-4">
                                {{ testimonial.testimonial|safe }}
                            </div>
                            <div class="col-12 testimonial-logo mb-1">
                                {% thumbnail testimonial.logo "100x100" upscale=False as thumb %}
                                    <img src="{{ thumb.url }}" alt="{{ testimonial.company_name }}"/>
                                {% endthumbnail %}
                            </div>
                            <div class="col-12 testimonial-name strong">
                                {{ testimonial.name }}
                            </div>
                            <div class="col-12 testimonial-designation mb-3">
                                {{ testimonial.designation }}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>