{{!
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/pagenav
TODO describe template pagenav
Example context (json):
{
}
}}
<div class="navbar fixed-top d-flex flex-row flex-nowrap align-items-center {{^darkmode}}bg-white{{/darkmode}} iv-pl-1 iv-rounded-0 {{#darkmode}}bg-dark text-white border-0{{/darkmode}}" data-completion="{{completed}}">
    <div class="d-flex align-items-center">
        <a href="{{{returnurl}}}#module-{{cmid}}"
           class="rotatex-360 btn btn-sm iv-mr-2 border-0 p-0 iv-ml-2"
           title="{{#str}}backtocourse,mod_interactivevideo{{/str}}"
           aria-label="{{#str}}backtocourse,mod_interactivevideo{{/str}}"
           data{{bs}}-placement="bottom"
           data{{bs}}-toggle="tooltip">
            <i class="dir-rtl-hide {{#darkmode}}text-white{{/darkmode}} bi bi-chevron-left fs-25px" aria-hidden="true"></i>
            <i class="dir-ltr-hide {{#darkmode}}text-white{{/darkmode}} bi bi-chevron-right fs-25px" aria-hidden="true"></i>
        </a>

        {{#hascourseindex}}
        <button role="button"
              class="rotatex-360 btn btn-sm iv-mr-2 border-0 p-0 iv-ml-2"
              data-toggler="drawers"
              data-action="toggle"
              data-target="theme_boost-drawers-courseindex"
              aria-label="{{#str}}opendrawerindex, core{{/str}}"
              title="{{#str}}opendrawerindex, core{{/str}}"
              data{{bs}}-toggle="tooltip"
              data{{bs}}-placement="bottom"
              >
            <i class="bi bi-list-ul fs-25px {{#darkmode}}text-white{{/darkmode}}" aria-hidden="true"></i>
        </button>
        {{/hascourseindex}}

        {{#manualcompletion}}
        {{{completion}}}
        {{/manualcompletion}}

        {{^manualcompletion}}
        {{#completion}}
        <div class="dropdown"
             title="{{#str}}todo,mod_interactivevideo{{/str}}"
             data{{bs}}-toggle="tooltip" data{{bs}}-placement="right">
            <button class="btn btn-sm border-0 bg-transparent btn-hover"
                    type="button"
                    id="completiondropdown"
                    data{{bs}}-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    aria-label="{{#str}}todo,mod_interactivevideo{{/str}}">
                <i class="fs-25px bi bi-check-circle{{#completed}}-fill{{/completed}} {{#darkmode}}{{^completed}}text-white{{/completed}}{{/darkmode}} {{#completedpass}}text-success{{/completedpass}}{{#completedfail}}text-danger{{/completedfail}}" aria-hidden="true"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-left px-2"
                 aria-labelledby="completiondropdown">{{{completion}}}</div>
        </div>
        {{/completion}}
        {{/manualcompletion}}

        <div class="metadata d-none d-md-block iv-ml-3 {{#darkmode}}text-white{{/darkmode}}"></div>
    </div>

    <div class="navigation d-flex align-items-center">
        {{#viewurl}}
        <a href="{{{viewurl}}}"
           title="{{#str}}play,mod_interactivevideo{{/str}}"
           aria-label="{{#str}}play,mod_interactivevideo{{/str}}"
           data{{bs}}-toggle="tooltip" data{{bs}}-placement="bottom"
           class="btn px-1 btn-sm iv-mr-2 border-0 btn-hover">
            <i class="bi bi-play-circle fs-25px {{#darkmode}}text-white{{/darkmode}}" aria-hidden="true"></i>
        </a>
        {{/viewurl}}

        {{#interactionsurl}}
        <a href="{{{interactionsurl}}}"
           title="{{#str}}interactions,mod_interactivevideo{{/str}}"
           aria-label="{{#str}}interactions,mod_interactivevideo{{/str}}"
           data{{bs}}-toggle="tooltip" data{{bs}}-placement="bottom"
           class="btn px-1 btn-sm iv-mr-2 border-0 btn-hover">
            <i class="bi bi-bullseye fs-25px {{#darkmode}}text-white{{/darkmode}}" aria-hidden="true"></i>
        </a>
        {{/interactionsurl}}

        {{#reporturl}}
        <a href="{{{reporturl}}}"
           title="{{#str}}report,mod_interactivevideo{{/str}}"
           aria-label="{{#str}}report,mod_interactivevideo{{/str}}"
           data{{bs}}-toggle="tooltip" data{{bs}}-placement="bottom"
           class="btn px-1 btn-sm iv-mr-2 border-0 btn-hover">
            <i class="bi bi-table fs-25px {{#darkmode}}text-white{{/darkmode}}" aria-hidden="true"></i>
        </a>
        {{/reporturl}}

        {{#settingurl}}
        <a href="javascript:void(0)"
           data-href="{{{settingurl}}}" data-cmid="{{cmid}}" data-courseid="{{courseid}}"
           data-contextid="{{contextid}}" data-interaction="{{instance}}" data-origin="navbar"
           title="{{#str}}settingstooltip, mod_interactivevideo{{/str}}"
           aria-label="{{#str}}settingstooltip, mod_interactivevideo{{/str}}"
           data{{bs}}-toggle="tooltip" data{{bs}}-html="true" data{{bs}}-placement="bottom"
           class="btn px-1 btn-sm iv-mr-2 border-0 iv_quickform btn-hover">
            <i class="bi bi-gear fs-25px {{#darkmode}}text-white{{/darkmode}}" aria-hidden="true"></i>
        </a>
        {{/settingurl}}

        {{#backupurl}}
        <a href="{{{backupurl}}}"
           title="{{#str}}backup{{/str}}"
           aria-label="{{#str}}backup{{/str}}"
           data{{bs}}-toggle="tooltip" data{{bs}}-placement="bottom"
           class="btn px-1 btn-sm iv-mr-2 border-0 btn-hover">
            <i class="bi bi-cloud-arrow-up fs-25px {{#darkmode}}text-white{{/darkmode}}" aria-hidden="true"></i>
        </a>
        {{/backupurl}}

        {{#restoreurl}}
        <a href="{{{restoreurl}}}"
           title="{{#str}}restore{{/str}}"
           aria-label="{{#str}}restore{{/str}}"
           data{{bs}}-toggle="tooltip" data{{bs}}-placement="bottom"
           class="btn px-1 btn-sm iv-mr-2 border-0 btn-hover">
            <i class="bi bi-cloud-arrow-down fs-25px {{#darkmode}}text-white{{/darkmode}}" aria-hidden="true"></i>
        </a>
        {{/restoreurl}}

        <span class="iv-mr-1">
            {{#useravatar}}
            {{> core/user_menu }}
            {{/useravatar}}
        </span>
    </div>
</div>

