{{!
    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/>.
}}
    
    {{#sliderenabled}}
    <div id="heroslider" class="c-heroslider {{^sliderfwenabled}}l-container section-padding{{/sliderfwenabled}} {{#sliderfwenabled}}c-hero-container--fw{{/sliderfwenabled}}">

      <div class="heroslider-container">

          <div class="heroslider hero-slider">
          {{#slides}}
          <div>
            <div class="c-hero heroslider-container row no-gutters {{slidertxtalign}} align-items-center" style="background-image: url({{{ image }}});">
              <div class="c-hero-content">
                {{#subtitle}}<div class="c-hero-content-t-1">{{{ subtitle }}}</div>{{/subtitle}}
                {{#title}}<h3 class="c-hero-content-t-2">{{{ title }}}</h3>{{/title}}
                {{#caption}}<div class="c-hero-content-t-3">{{{ caption }}}</div>{{/caption}}
              </div>
            </div>
          </div>
          {{/slides}}
          </div>
        </div>
    </div>

    <script>
    var slider = tns({
      container: '.hero-slider',
      items: 1,
      mode: 'carousel',
      slideBy: 1,
      mouseDrag: true,
      autoHeight: true,
      controlsText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
      {{#sliderloop}}loop: true,{{/sliderloop}}
      {{#sliderintervalenabled}}autoplayButtonOutput: false, autoplay: true, autoplayTimeout: {{sliderinterval}},{{/sliderintervalenabled}}
      controls: true
    });  
    </script>
    {{/sliderenabled}}
