{{!
    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 />.
}}
{{!
    @template theme_almondb/frontpage/block08_1

    Moodle template for the frontpage block08 design 1.
}}
<div class="block08design1 blockbgcolor gray-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title-fp hytext text-center blockbgwhite-b">
                    <h4>{{block08header}}</h4>
                </div>
                <div class="item-content text-center pt-2 pb-2">
                    {{{block08caption}}}
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="block08design1-slider" class="splide">
            <div class="splide__track">
                <ul class="splide__list ">
                {{#block08}}
                <li class="splide__slide  hy__container ">
                    <a href="{{userURL}}">
                    <div class="hy__image">
                        <img src="{{userpictureURL}}" alt="user">
                    </div>
                    </a>
                    {{#block08total}}
                    <div class="hy__info hy-pt-15">
                        <h6 class="text-center hytext">{{teachername}}</h6>
                        <div class="row hytext">
                            <div class="col-6">
                                {{^showdescription}}
                                <span data-bs-toggle="tooltip" data-placement="top"
                                    title="{{#str}}block08tooltipstudents, theme_almondb {{/str}}">
                                    {{/showdescription}}
                                    <i class="fa fa-user-graduate"> </i> {{studentscount}}+Students
                                    {{^showdescription}}
                                </span>
                                {{/showdescription}}
                            </div>
                            <div class="col-6">
                                {{^showdescription}}
                                <span class="float-end" data-bs-toggle="tooltip" data-placement="top"
                                    title="{{#str}}block08tooltipcourse, theme_almondb {{/str}}">
                                    <i class="fa fa-light fa-laptop-file"> </i> {{coursecount}}+Courses
                                </span>
                                {{/showdescription}}
                                {{#showdescription}}
                                <span class="float-end">
                                    <i class="fa fa-light fa-laptop-file"> </i> {{coursecount}}+Courses
                                </span>
                                {{/showdescription}}
                            </div>
                        </div>
                    </div>
                    {{/block08total}}
                    {{^block08total}}
                    <div class="hy__info hy-pt-15">
                        <h6 class="text-center hytext">{{teachername}}</h6>
                    </div>
                    {{/block08total}}
                    {{#showdescription}}
                    <div class="hy__overlay scroller">
                        <div class="hy__text">
                            <h6 class="text-center">{{teachername}}</h6>
                            {{{description}}}
                        </div>
                    </div>
                    {{/showdescription}}
                </li>
                {{/block08}}
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Splide('#block08design1-slider', {
      type: 'loop',
      autoplay: true,
      gap: '1rem',
      perPage: 4,
      perMove: 1,
      pagination: false,
      direction: document.dir,
      breakpoints: {
        1200: {
          perPage: 3,
        },
        980: {
          perPage: 2,
        },
        700: {
          perPage: 1,
          pagination: false,
        },
      }
    }).mount();
  });
</script>