{{!
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/editor/editortimeline
TODO describe template editortimeline
Example context (json):
{
}
}}
<div id="timeline-wrapper" class="d-flex flex-column" dir="ltr">
    <div id="timeline-btns" class="py-2 w-100 position-relative z-index-1">
        <div class="col">
            <button class="btn btn-sm py-0 px-2 btn-primary text-uppercase mx-2 border-0"
                    type="button"
                    id="addcontent">
                <i class="bi bi-plus-lg"></i><span class="iv-ml-2 d-none d-md-inline">{{#str}}add,mod_interactivevideo{{/str}}</span>
            </button>
            <button class="btn btn-sm py-0 px-2 btn-secondary text-uppercase mx-1 rotatez-360 border-0"
                    type="button"
                    id="importcontent">
                <i class="bi bi-arrow-down"></i><span class="iv-ml-2 d-none d-md-inline">{{#str}}import,mod_interactivevideo{{/str}}</span>
            </button>
        </div>
        <div class="col text-center d-flex align-items-center justify-content-center"
             id="playbutton" >
            <button class="btn btn-sm py-0 px-1 text-white border-0 bg-transparent d-none d-sm-inline" type="button" id="rewind" title="{{#str}}rewind200,mod_interactivevideo{{/str}}" >
                <i class="bi bi-rewind-fill"></i>
            </button>
            <button class="btn btn-sm py-0 px-1 text-white mx-3 border-0 bg-transparent" title="{{#str}}playpause,mod_interactivevideo{{/str}}" type="button" id="playpause">
                <i class="bi bi-play-fill fs-35px"></i>
            </button>
            <button class="btn btn-sm py-0 px-1 text-white border-0 bg-transparent d-none d-sm-inline" type="button" id="fast-forward" title="{{#str}}fastforward200,mod_interactivevideo{{/str}}" >
                <i class="bi bi-fast-forward-fill"></i>
            </button>
            <span id="timeline-timestamp" class="d-none d-md-inline"><span class="text-white" id="currenttime">00:00</span><span class="mx-1">/</span><span class="text-white" id="duration">00:00</span></span>
            <div class="btn-group dropup d-none" id="changerate">
                <span role="button"
                      data{{bs}}-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                      class="btn border-0 btn-sm btn-control text-white bg-transparent py-0 px-1"><i class="bi bi-speedometer2"
   data{{bs}}-toggle="tooltip"
   data{{bs}}-trigger="focus"
   title="{{#str}}changeplaybackspeed,mod_interactivevideo{{/str}}"></i></span>
                <div class="dropdown-menu dropdown-menu-{{#bs}}end{{/bs}}{{^bs}}right{{/bs}} bg-black">
                    <a class="dropdown-item changerate px-3" data-rate="0.5" href="#"><i class="bi fa-fw"></i>0.5</a>
                    <a class="dropdown-item changerate px-3" data-rate="0.75" href="#"><i class="bi fa-fw"></i>0.75</a>
                    <a class="dropdown-item changerate px-3" data-rate="1" href="#"><i class="bi fa-fw bi-check"></i>1</a>
                    <a class="dropdown-item changerate px-3" data-rate="1.5" href="#"><i class="bi fa-fw"></i>1.5</a>
                    <a class="dropdown-item changerate px-3" data-rate="2" href="#"><i class="bi fa-fw"></i>2</a>
                </div>
            </div>
            <div class="d-none btn-group dropup mx-3" id="changequality" data-current="">
            <span role="button"
                  data{{bs}}-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  class="btn border-0 btn-sm btn-control text-white bg-transparent py-0 px-1 mx-1">
                <i class="bi bi-gear"
                   data{{bs}}-toggle="tooltip"
                   data{{bs}}-trigger="focus"
                   title="{{#str}}videoquality,mod_interactivevideo{{/str}}"></i>
            </span>
            <div class="dropdown-menu dropdown-menu-{{#bs}}end{{/bs}}{{^bs}}right{{/bs}} bg-black text-white"
                 id="qualitieslist"></div>
            </div>
        </div>
        <div class="d-flex col justify-content-end" dir="ltr">
            <button class="btn btn-sm py-0 px-2 btn-secondary text-uppercase mx-4 border-0"
                    disabled
                    id="savedraft">
                <i class="bi bi-floppy"></i><span class="iv-ml-2 d-none d-md-inline">{{#str}}save,mod_interactivevideo{{/str}}</span>
            </button>
            <div id="zoomlevel" class="d-flex align-items-center">
                <button class="btn btn-sm p-0 text-white mx-2 border-0 bg-transparent"
                        type="button"
                        disabled
                        id="zoomout">
                    <i class="bi bi-zoom-out"></i>
                </button>
                <button class="btn btn-sm p-0 text-white mx-2 border-0 bg-transparent" type="button" id="zoomin">
                    <i class="bi bi-zoom-in"></i>
                </button>
            </div>
            <button class="border-0 btn btn-sm p-0 text-white mx-2 bg-transparent"
                    data{{bs}}-toggle="popover"
                    data{{bs}}-trigger="hover"
                    data{{bs}}-placement="auto"
                    data{{bs}}-boundary="viewport"
                    data{{bs}}-content='{{#str}}videonavhelp,mod_interactivevideo{{/str}}'
                    data{{bs}}-html="true">
                <i class="bi bi-info-circle"></i>
            </button>
            <button class="border-0 btn btn-sm p-0 text-white mx-2 bg-transparent"
                    data{{bs}}-toggle="popover"
                    data{{bs}}-trigger="hover"
                    data{{bs}}-placement="auto"
                    data{{bs}}-boundary="viewport"
                    data{{bs}}-content='{{#str}}keyboardshortcuts,mod_interactivevideo{{/str}}'
                    data{{bs}}-html="true">
                <i class="bi bi-keyboard"></i>
            </button>
        </div>
    </div>
    <div id="minute-markers-bg-wrapper" class="position-absolute h-100" dir="ltr" >
        <div id="minute-markers-bg" class="pt-1 d-flex position-relative" dir="ltr"></div>
    </div>
    <div id="minute-markers-wrapper" class="position-relative" dir="ltr">
        <div id="minute-markers" class="pt-1 d-flex position-relative"></div>
    </div>
    <div id="vseek" class="iv-mx-5 position-relative" dir="ltr">
        <div id="scrollhead-top"></div>
        <div class="w-100" id="bar"></div>
    </div>
    <div id="timeline" class="iv-px-5">
        <div id="timeline-items-wrapper" class="iv-pl-0" dir="ltr">
            <div id="timeline-items" dir="ltr">
                <div id="scrollbar" class="snap">
                    <div id="scrollhead" class="opacity-0 bg-transparent"></div>
                    <div id="scrollline"></div>
                </div>
                <div id="interaction-timeline" dir="ltr">
                    <div id="video-nav" dir="ltr">
                        <ul>
                        </ul>
                    </div>
                </div>
                <div id="video-timeline-wrapper" dir="ltr">
                    <div id="video-timeline" class="iv-rounded-sm" dir="ltr"></div>
                </div>
                <div id="annotation-timeline" dir="ltr"></div>
            </div>
        </div>
    </div>
</div>
