{{!
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
HTML body for the interaction page.
Example context (json):
{
}
}}
{{! Required for viostream, bunnystream.}}
{{#useembedly}}
<script src="https://cdn.embed.ly/player-0.1.0.min.js"></script>
{{/useembedly}}
<div id="wrapper">
    <div id="top-region">
        <div class="iv-row m-0 position-relative">
            <div class="p-3" id="player-region">
                {{! Player }}
                <div id="video-wrapper">
                    {{! start of toolbar}}
                    <div id="toolbar" class="bg-transparent pt-5 position-fixed"></div>
                    {{! end of toolbar }}
                    <div class="position-absolute w-100 h-100 no-pointer bg-transparent"
                         id="background-loading"
                         style="display:none">
                        <div class="d-flex h-100 align-items-center justify-content-center">
                            <div class="spinner-border text-danger"
                                 style="width: 3rem;
                                        height: 3rem"
                                 role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div id="annotation-canvas" class="d-none w-0">
                        <div id="video-block"
                             class="position-absolute w-100 h-100"
                             style="z-index: 1"></div>
                        {{#html5}}
                        <video id="player" class="w-100 bg-black">
                        </video>
                    {{/html5}}
                    {{^html5}}
                    <div id="player" class="w-100 p-0"></div>
                {{/html5}}
            </div>
        </div>
        <div id="annotation-content" class="w-100 position-relative"></div>
    </div>
    <div id="separator"
         class="d-none iv-border-left d-lg-flex align-items-center justify-content-center h-100 position-absolute z-index-1">
        <i class="position-absolute bi bi-grip-vertical"></i>
    </div>
    <div class="p-3 position-relative" id="content-region">
        <div class="w-100 h-100 overflow-auto border iv-rounded-lg position-relative" id="contentblock">
            {{! action bar }}
            <div id="video-action"
                 class="px-3 py-2 bg-light d-flex align-items-center justify-content-between mx-auto w-100 position-sticky">
                <div class="text-truncate">
                    <span class="h4 mb-0 text-truncate iv-font-weight-bold">{{{title}}}</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="btn border-0" id="xp">
                        <span class="iv-font-weight-bold">0</span>
                        <i class="bi bi-star iv-ml-1"></i>
                    </div>
                    <span class="mx-2 iv-font-weight-bold text-truncate"
                          title="{{#str}}gradenoun{{/str}}">/ {{grade}}</span>
                </div>
            </div>
            {{! content item list }}
            <div id="annotationwrapper" class="overflow-auto bg-white">
                <table class="table table-sm w-100 table-hover small table-borderless">
                    <tbody id="annotation-list">
                        <tr>
                            <td>
                                <div class="loader w-100 mt-6"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="annotation-list-bulk">
                    <div>
                        <button class="btn btn-sm border-0" disabled id="annotation-list-bulk-paste"
                         title="{{#str}}paste, mod_interactivevideo{{/str}}">
                            <i class="bi bi-clipboard"></i>
                        </button>
                        <button class="btn btn-sm border-0" id="annotation-list-bulk-upload"
                         title="{{#str}}upload, mod_interactivevideo{{/str}}">
                            <i class="bi bi-upload"></i>
                        </button>
                        <button class="btn btn-sm border-0" id="annotation-list-bulk-edit"
                         title="{{#str}}bulkedit, mod_interactivevideo{{/str}}">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <button class="btn btn-sm border-0 d-none" id="annotation-list-bulk-checkall"
                            title="{{#str}}checkall, mod_interactivevideo{{/str}}">
                            <i class="bi bi-check2-square"></i>
                        </button>
                    </div>
                    <div class="bulk-actions" style="display:none">
                        <button class="btn btn-sm" id="annotation-list-bulk-copy"
                        title="{{#str}}copy, mod_interactivevideo{{/str}}">
                            <i class="bi bi-copy"></i>
                        </button>
                        <button class="btn btn-sm" id="annotation-list-bulk-download"
                        title="{{#str}}download, mod_interactivevideo{{/str}}">
                            <i class="bi bi-download"></i>
                        </button>
                        <button class="btn btn-sm" id="annotation-list-bulk-delete"
                            title="{{#str}}delete, mod_interactivevideo{{/str}}">
                            <i class="bi bi-trash3-fill text-danger"></i>
                        </button>
                        <button class="btn btn-sm" id="annotation-list-bulk-setdefault"
                            title="{{#str}}setasdefault, mod_interactivevideo{{/str}}">
                            <i class="bi bi-ui-checks text-primary"></i>
                        </button>
                    </div>
                </div>
            </div>
            {{! content item template }}
            <table>
                <tr id="annotation-template"
                    class="annotation listItem border-bottom d-none position-relative"
                    data-timestamp="0"
                    data-id="0"
                    data-type="">
                    <td>
                        <div class="d-flex align-items-center">
                            <span data-editable="timestamp"
                                  title="{{#str}}goto, mod_interactivevideo{{/str}}"
                                  class="timestamp bg-light px-2 py-1 iv-rounded text-truncate">0</span>
                            <input type="text"
                                   name="timestampassist"
                                   data-field="timestamp"
                                   title="{{#str}}rightclicktosetcurrenttime, mod_interactivevideo{{/str}}"
                                   class="form-control form-control-sm d-none">
                        </div>
                    </td>
                    <td>
                        <div class="w-100 d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center flex-grow-1 type-name rotatey-360">
                                <span class="border-0 btn btn-sm type-icon iv-mr-2" title="">
                                    <i class="fa fa-fw"></i>
                                </span>
                                <span data-editable="title"
                                      class="title iv-font-weight-bold text-primary cursor-pointer"></span>
                                <input type="text"
                                       data-field="title"
                                       class="form-control form-control-sm d-none">
                            </div>
                            <div class="btns d-flex align-items-center">
                                <span data-editable="xp"
                                      title="{{#str}}xppoint, mod_interactivevideo{{/str}}"
                                      class="border-0 p-1 btn btn-sm xp">
                                    <span></span>
                                    <i class="bi bi-star iv-ml-1"></i>
                                </span>
                                <input type="number"
                                       min="0"
                                       data-field="xp"
                                       class="form-control form-control-sm d-none">
                                <button title="{{#str}}clone, mod_interactivevideo{{/str}}"
                                        class="border-0 px-2 btn btn-sm copy">
                                    <i class="bi bi-copy"></i>
                                </button>
                                <button title="{{#str}}edit, mod_interactivevideo{{/str}}"
                                        class="border-0 px-2 btn btn-sm edit">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button class="border-0 px-2 btn btn-sm text-danger delete"
                                        title="{{#str}}delete, mod_interactivevideo{{/str}}">
                                    <i class="bi bi-trash3-fill"></i>
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</div>
</div>
{{! content type modal }}
{{> mod_interactivevideo/addcontenttype }}
{{> mod_interactivevideo/editortimeline }}
{{! a little hack for sites that use classic-based themes }}
{{> mod_interactivevideo/blocksettingshack }}
