{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
<div class="block10design2 hy-mt-50 blockbgcolor gray-bg">
    <div class="carousel-area container">
        <div class="section-title-fp d-flex hytext">
            <h4>{{block10header}}</h4>
            <div class="d-block ms-auto p-2">
                <a class="btn-sm me-1" style="border-radius: 50%;" href="#carouselTestimonials" role="button" data-bs-slide="prev"> 
                    <i class="fa fa-chevron-left"></i> 
                </a>
                <a class="btn-sm" style="border-radius: 50%;" href="#carouselTestimonials" role="button" data-bs-slide="next"> 
                    <i class="fa fa-chevron-right"></i> 
                </a>
            </div>
        </div>
    </div>    
    <div class="container">
        <div class="row">
            {{! Testimonials area }}
            <div  id="carouselTestimonials" class="carousel slide col-lg" data-ride="carousel">
                <div class="carousel-inner">
                    {{#block10}}
                        <div class="carousel-item testimonial-carousel {{#active}}active{{/active}}">
                            <div class="testimonial-content d-flex">
                                <i class="fa fa-quote-left"></i>
                                <p> {{{block10caption}}}</p>
                            </div>
                            <div class="author-details d-flex">
                                <div class="author-img">
                                    <img src="{{block10image}}" alt="">
                                </div>
                                <div class="author-content">
                                    <a href="{{block10linkurl}}" class="text-decoration-none">{{block10name}}</a>
                                    <span>{{block10job}}</span>
                                </div>
                            </div>
                        </div>
                    {{/block10}}
                </div>    
                <div class="d-none">
                    <a class="carousel-control-prev btn-sm"  href="#carouselTestimonials" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden-focusable">Previous</span>
                    </a>
                    <a class="carousel-control-next btn-sm" href="#carouselTestimonials"  data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden-focusable">Next</span>
                    </a>
                </div>  
            </div>
        </div>
    </div>
</div>