{{!
    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 mod_interactivevideo/player/controls

    TODO describe template controls

    Example context (json):
    {
    }
}}
<div class="mt-0 mt-md-2 bg-dark {{#displayoptions.hidemainvideocontrols}}d-none{{/displayoptions.hidemainvideocontrols}}{{^displayoptions.hidemainvideocontrols}}d-flex{{/displayoptions.hidemainvideocontrols}} flex-column p-0 justify-content-center opacity-1 {{#displayoptions.alignindicator}}align-indicator{{/displayoptions.alignindicator}} {{^displayoptions.distractionfreemode}}mb-2{{/displayoptions.distractionfreemode}}" dir="ltr"
     id="controller">
    <div id="taskinfo" dir="ltr"
         class="border-0 flex-column align-items-center justify-content-end px-3 bg-transparent">
        <div class="align-items-start position-relative w-100 {{#displayoptions.hideinteractions}}d-none{{/displayoptions.hideinteractions}}"
             id="interactions-nav">
            <ul>
            </ul>
        </div>
        <div class="flex-column align-items-center position-relative w-100"
             id="video-nav"
             {{^displayoptions.progressbar}}style="visibility: hidden;"{{/displayoptions.progressbar}}>
            <ul>
            </ul>
            <div class="w-100 d-flex align-items-center" dir="ltr">
                <div id="progress" class="bg-danger"></div>
                <div id="seek" class="w-100 position-absolute iv-rounded"></div>
                <div id="seekhead" class="position-absolute iv-rounded-circle bg-danger"></div>
            </div>
        </div>
    </div>
    <div class="w-100 px-2 d-flex align-items-center justify-content-between pb-2"
         style="height: 30px">
        <div class="d-flex align-items-center">
            <span data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
                  data{{bs}}-trigger="hover"
                  role="button"
                  data{{bs}}-title="{{#str}}playtooltip, mod_interactivevideo{{/str}}"
                  id="playpause"
                  class="btn border-0 btn-sm btn-control text-white bg-transparent py-0 px-0">
                <i class="bi bi-play-fill fs-25px"></i>
            </span>
            <span data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
                  data{{bs}}-trigger="hover"
                  data{{bs}}-title="{{#str}}rewindtooltip, mod_interactivevideo{{/str}}"
                  class="btn border-0 btn-sm btn-control text-white bg-transparent py-0 px-1 mx-1 {{^displayoptions.rewind}}d-none{{/displayoptions.rewind}}"
                  id="rewindbutton"><i class="fa fa-history"></i></span>
            <span data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
                  data{{bs}}-trigger="hover"
                  data{{bs}}-title="{{#str}}forwardtooltip, mod_interactivevideo{{/str}}"
                  class="btn border-0 btn-sm btn-control text-white bg-transparent py-0 px-1 mx-1 {{^displayoptions.forward}}d-none{{/displayoptions.forward}}"
                  id="forwardbutton"><i class="fa fa-history fa-flip-horizontal"></i></span>
            {{^displayoptions.disablechapternavigation}}
            <div id="chaptertoggle" class="mx-1">
                <span data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
                      data{{bs}}-trigger="hover"
                      data{{bs}}-title="{{#str}}togglechapter, mod_interactivevideo{{/str}}"
                      class="btn border-0 btn-sm btn-control text-white bg-transparent py-0 px-1"
                      id="chapterbutton"><i class="bi bi-collection"></i></span>
            </div>
            {{/displayoptions.disablechapternavigation}}
        {{#displayoptions.timestamp}}
        <span class="text-white mx-1 d-none d-md-inline" id="currenttime">00:00</span><span class="d-none d-md-inline text-white mx-1">/</span>
        <span class="text-white mx-1 d-none d-md-inline" id="duration">--:--</span>
        <span class="text-white d-md-none d-inline mx-1 " id="remainingtime">--:--</span>
        {{/displayoptions.timestamp}}
        <span class="text-secondary mx-1 d-none {{#displayoptions.chaptertitle}}d-md-inline{{/displayoptions.chaptertitle}}" id="chaptertitle"></span>
    </div>
    <div class="d-flex align-items-center">
        <span id="mute"
              class="btn border-0 btn-sm btn-control text-white bg-transparent py-0 px-1 mx-1 {{^displayoptions.mute}}d-none{{/displayoptions.mute}}"
              data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
              data{{bs}}-trigger="hover"
              data{{bs}}-title="{{#str}}mutetooltip,mod_interactivevideo{{/str}}"><i class="bi bi-volume-up"></i></span>
        {{> mod_interactivevideo/captionmenu }}
        {{> mod_interactivevideo/player/speedmenu }}
        {{> mod_interactivevideo/player/qualitymenu }}
        <span class="btn border-0 btn-sm btn-control text-white py-0 px-1 mx-1 {{^displayoptions.share}}d-none{{/displayoptions.share}}"
              id="share"
              data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
              data{{bs}}-trigger="hover"
              data{{bs}}-title="{{#str}}sharethismoment,mod_interactivevideo{{/str}}"><i class="bi bi-share"></i></span>
        {{#displayoptions.expand}}
        <span class="btn border-0 btn-sm btn-control text-white py-0 px-1 mx-1 rotate d-none"
              id="expand"
              data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
              data{{bs}}-trigger="hover"
              data{{bs}}-title="{{#str}}resize,mod_interactivevideo{{/str}}"><i class="bi bi-file"></i></span>
              {{/displayoptions.expand}}
        <span class="btn border-0 btn-sm btn-control text-white py-0 px-1 mx-1 {{^displayoptions.fullscreen}}d-none{{/displayoptions.fullscreen}}"
              id="fullscreen"
              data{{bs}}-toggle="tooltip" data{{bs}}-container="#wrapper"
              data{{bs}}-trigger="hover"
              data{{bs}}-title="{{#str}}togglefullscreen,mod_interactivevideo{{/str}}"><i class="bi bi-fullscreen"></i></span>
    </div>
</div>
</div>