{{!
    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_stream/head

    Stream head template.

    Example context (json):
    { "output" :
        {
            "index" : 0,
            "active" : 1,
            "single" : 1,
            "sliderimage" : "beautiful.jpg",
            "homepageheroimage" : "https://placehold.co/1920x600",
            "herotitle": "Slider title",
            "slidermotto": "This is my motto",
            "sliderlink": "https://google.com",
            "sliderbutton": "My text"
        }
    }
}}



<div id="herocarousel" class="main-carousel carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {{#slides}}
            {{^single}}
                <li data-target="#herocarousel" data-slide-to="{{index}}" title="{{#str}}jumptoslide,
                theme_stream{{/str}}" {{#active}}class="active">{{/active}}</li>
            {{/single}}
        {{/slides}}
    </ol>
    <div class="carousel-inner">
        {{#slides}}
        <div class="carousel-item {{#active}}active{{/active}}">
            <img class="d-block w-100" src="{{{sliderimage}}}" alt="Slide {{index}} image">
            <div class="overlay slide{{index}}">
                <div class="container">
                    <div class="carousel-caption">
                        <h1 class="display-4">{{herotitle}}</h1>
                        <p class="h5">{{slidermotto}}</p>
                        {{#sliderlink}}
                        <a href="{{{sliderlink}}}" class="btn btn-primary btn-lg" role="button">{{sliderbutton}}</a>
                        {{/sliderlink}}
                    </div>
                </div>
            </div>
        </div>
        {{/slides}}
    </div>
    {{#slides}}
        {{^single}}
    <a class="carousel-control carousel-control-prev" href="#herocarousel" role="button" data-slide="prev" title="{{#str}}prev,
    theme_stream{{/str}}">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </a>
    <a class="carousel-control carousel-control-next" href="#herocarousel" role="button" data-slide="next" title="{{#str}}next,
    theme_stream{{/str}}">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </a>
        {{/single}}
    {{/slides}}
</div>