{{!
    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/>.
}}
{{#fpblock8}}
{{#showfpblock8hr}}<hr class="hr-small" />{{/showfpblock8hr}}

<div id="block8" class="l-container section-padding-2">

  {{#showfpblock8intro}}
  <div class="s-section-desc col-sm-11 col-md-8 col-lg-5 ml-auto mr-auto mb-5 text-center">
    {{#fpblock8title}}<h3 class="c-section-desc-heading">{{{fpblock8title}}}</h3>{{/fpblock8title}}
    {{#fpblock8content}}<div class="c-section-desc">{{{fpblock8content}}}</div>{{/fpblock8content}}
  </div>
  {{/showfpblock8intro}}

  <div class="block8-slider">

    {{#block8}}
    <div class="c-course-card-item">
      <div class="c-course-card {{#fpblock8showbg}}c-course-card-white{{/fpblock8showbg}}" id="block8-{{{fpblock8no}}}">
        <div class="c-course-card-content">
          {{#fpblock8first}}<span class="c-course-card-lab">{{{fpblock8first}}}</span>{{/fpblock8first}}
          <h4 class="c-course-card-title">
            {{#fpblock8second}}{{{fpblock8second}}}{{/fpblock8second}}
            {{#fpblock8third}}<br /><span class="c-course-card-teacher">{{{fpblock8third}}}</span>{{/fpblock8third}}
          </h4>
        </div>
        {{#image}}<div class="c-course-card-bg {{#fpblock8showbg}}c-course-card-bg-show{{/fpblock8showbg}}" style="background-image: url({{{image}}});"></div>{{/image}}
      </div>
    </div>
    {{/block8}}

  </div><!-- Courses list end -->

</div>
{{/fpblock8}}

<script>
  var slider = tns({
    container: '.block8-slider',
    items: 1,
    slideBy: 1,
    mouseDrag: true,
    controlsText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
    loop: false,
    gutter: 20,
    responsive: {
      768: {
        items: 2,
        slideBy: 2,
      },
      1100: {
        items: 4,
        slideBy: 4,
      }
    }
  });
</script>
