Proyectos de Subversion Moodle

{{!
    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 tiny_media/embed_media_modal_audio

    Embed media audio modal template.

    Example context (json):
    {

    }
}}
{{#audio.sources}}
    <div class="tiny_media_source tiny_media_media_source">
        <div class="mb-1">
            <label for="audio-audio-url-input">
                {{#str}} audiosourcelabel, tiny_media {{/str}}
            </label>
            <div class="input-group input-append w-100">
                <input id="audio-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{.}}"/>
                {{#showfilepicker}}
                <span class="input-group-append">
                    <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                </span>
                {{/showfilepicker}}
            </div>
        </div>
        <div class="addcomponent-wrapper">
            <a href="#" class="addcomponent">
                {{#str}} addsource, tiny_media {{/str}}
            </a>
            {{#addsourcehelpicon}}
                {{> core/help_icon }}
            {{/addsourcehelpicon}}
        </div>
        <div class="removecomponent-wrapper hidden">
            <a href="#" class="removecomponent">
                {{#str}} remove, tiny_media {{/str}}
            </a>
        </div>
    </div>
{{/audio.sources}}
{{^audio}}
    <div class="tiny_media_source tiny_media_media_source">
        <div class="mb-1">
            <label for="audio-audio-url-input">
                {{#str}} audiosourcelabel, tiny_media {{/str}}
            </label>
            <div class="input-group input-append w-100">
                <input id="audio-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
                {{#showfilepicker}}
                <span class="input-group-append">
                    <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                </span>
                {{/showfilepicker}}
            </div>
        </div>
        <div class="addcomponent-wrapper">
            <a href="#" class="addcomponent">
                {{#str}} addsource, tiny_media {{/str}}
            </a>
            {{#addsourcehelpicon}}
                {{> core/help_icon }}
            {{/addsourcehelpicon}}
        </div>
        <div class="removecomponent-wrapper hidden">
            <a href="#" class="removecomponent">
                {{#str}} remove, tiny_media {{/str}}
            </a>
        </div>
    </div>
{{/audio}}
<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options">
    <input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">
    <legend class="d-flex align-items-center px-1">
        <div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">
            <a role="button" data-toggle="collapse" href="#adisplayoptions" aria-expanded="false"
               aria-controls="adisplayoptions"
               class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">
            <span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, moodle {{/str}}">
                                <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
                            </span>
                <span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, moodle {{/str}}">
                                <span class="dir-rtl-hide">
                                    <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
                                </span>
                                <span class="dir-ltr-hide">
                                    <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
                                </span>
                            </span>
                <span class="sr-only">{{#str}} displayoptions, tiny_media {{/str}}</span>
            </a>
            <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
                {{#str}} displayoptions, tiny_media {{/str}}
            </h3>
        </div>
    </legend>
    <div id="adisplayoptions" class="fcontainer collapseable collapse px-1">
        <div class="tiny_media_display_options">
            <div class="mb-1">
                <label for="adisplayoptions_media-title-entry">{{#str}} entertitle, tiny_media {{/str}}</label>
                <input class="form-control fullwidth tiny_media_title_entry" type="text" id="adisplayoptions_media-title-entry"
                       size="32" value="{{audio.title}}"/>
            </div>
        </div>
    </div>
</fieldset>
<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings">
    <input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">
    <legend class="d-flex align-items-center px-1">
        <div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">
            <a role="button" data-toggle="collapse" href="#aadvancedsettings" aria-expanded="false"
               aria-controls="aadvancedsettings"
               class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">
            <span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, moodle {{/str}}">
                                <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
                            </span>
                <span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, moodle {{/str}}">
                                <span class="dir-rtl-hide">
                                    <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
                                </span>
                                <span class="dir-ltr-hide">
                                    <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
                                </span>
                            </span>
                <span class="sr-only">{{#str}} advancedsettings, tiny_media {{/str}}</span>
            </a>
            <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
                {{#str}} advancedsettings, tiny_media {{/str}}
            </h3>
        </div>
    </legend>
    <div id="aadvancedsettings" class="fcontainer collapseable collapse px-1">
        <div class="tiny_media_advancedsettings">
            <div class="form-check">
                <input type="checkbox" checked="true" class="form-check-input tiny_media_controls"
                       id="aadvancedsettings_media-controls-toggle" {{# audio.controls }}checked{{/ audio.controls }}/>
                <label class="form-check-label" for="aadvancedsettings_media-controls-toggle">
                    {{#str}} controls, tiny_media {{/str}}
                </label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input tiny_media_autoplay"
                       id="aadvancedsettings_media-autoplay-toggle" {{# audio.autoplay }}checked{{/ audio.autoplay }}/>
                <label class="form-check-label" for="aadvancedsettings_media-autoplay-toggle">
                    {{#str}} autoplay, tiny_media {{/str}}
                </label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input tiny_media_mute"
                       id="aadvancedsettings_media-mute-toggle" {{# audio.muted }}checked{{/ audio.muted }}/>
                <label class="form-check-label" for="aadvancedsettings_media-mute-toggle">
                    {{#str}} mute, tiny_media {{/str}}
                </label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input tiny_media_loop"
                       id="aadvancedsettings_media-loop-toggle" {{# audio.loop }}checked{{/ audio.loop }}/>
                <label class="form-check-label" for="aadvancedsettings_media-loop-toggle">
                    {{#str}} loop, tiny_media {{/str}}
                </label>
            </div>
        </div>
    </div>
</fieldset>
<fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks">
    <input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">
    <legend class="d-flex align-items-center px-1">
        <div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">
            <a role="button" data-toggle="collapse" href="#atracks" aria-expanded="false"
               aria-controls="atracks"
               class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">
            <span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, moodle {{/str}}">
                                <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
                            </span>
                <span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, moodle {{/str}}">
                                <span class="dir-rtl-hide">
                                    <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
                                </span>
                                <span class="dir-ltr-hide">
                                    <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
                                </span>
                            </span>
                <span class="sr-only">{{#str}} tracks, tiny_media {{/str}}</span>
            </a>
            <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
                {{#str}} tracks, tiny_media {{/str}}
            </h3>
        </div>
        {{#trackshelpicon}}
            {{> core/help_icon }}
        {{/trackshelpicon}}
    </legend>
    <div id="atracks" class="fcontainer collapseable collapse px-1">
        <ul class="nav nav-tabs mb-3">
            <li data-track-kind="subtitles" class="nav-item">
                <a class="nav-link active" href="#{{elementid}}_atracks_subtitles"
                   role="tab" data-toggle="tab">
                    {{#str}} subtitles, tiny_media {{/str}}
                </a>
            </li>
            <li data-track-kind="captions" class="nav-item">
                <a class="nav-link" href="#{{elementid}}_atracks_captions" role="tab" data-toggle="tab">
                    {{#str}} captions, tiny_media {{/str}}
                </a>
            </li>
            <li data-track-kind="descriptions" class="nav-item">
                <a class="nav-link" href="#{{elementid}}_atracks_descriptions"
                   role="tab" data-toggle="tab">
                    {{#str}} descriptions, tiny_media {{/str}}
                </a>
            </li>
            <li data-track-kind="chapters" class="nav-item">
                <a class="nav-link" href="#{{elementid}}_atracks_chapters" role="tab" data-toggle="tab">
                    {{#str}} chapters, tiny_media {{/str}}
                </a>
            </li>
            <li data-track-kind="metadata" class="nav-item">
                <a class="nav-link" href="#{{elementid}}_atracks_metadata" role="tab" data-toggle="tab">
                    {{#str}} metadata, tiny_media {{/str}}
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div data-track-kind="subtitles" class="tab-pane active"
                 id="{{elementid}}_atracks_subtitles">
                <div class="trackhelp">
                    {{#subtitleshelpicon}}
                        {{> core/help_icon }}
                    {{/subtitleshelpicon}}
                </div>
                {{#audio.tracks.subtitles}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="subtitle-audio-url-input">
                                    {{#str}} subtitlessourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="subtitle-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="subtitle-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="subtitle-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="subtitle-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="subtitle-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addsubtitlestrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.subtitles}}
                {{^audio.tracks.subtitles}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="subtitle-audio-url-input">
                                    {{#str}} subtitlessourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="subtitle-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="subtitle-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="subtitle-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="subtitle-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="subtitle-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addsubtitlestrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.subtitles}}
            </div>
            <div data-track-kind="captions" class="tab-pane"
                 id="{{elementid}}_atracks_captions">
                <div class="trackhelp">
                    {{#captionshelpicon}}
                        {{> core/help_icon }}
                    {{/captionshelpicon}}
                </div>
                {{#audio.tracks.captions}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="caption-audio-url-input">
                                    {{#str}} captionssourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="caption-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="caption-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="caption-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="caption-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="caption-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addcaptionstrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.captions}}
                {{^audio.tracks.captions}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="caption-audio-url-input">
                                    {{#str}} captionssourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="caption-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="caption-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="caption-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="caption-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="caption-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addcaptionstrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.captions}}
            </div>
            <div data-track-kind="descriptions" class="tab-pane"
                 id="{{elementid}}_atracks_descriptions">
                <div class="trackhelp">
                    {{#descriptionshelpicon}}
                        {{> core/help_icon }}
                    {{/descriptionshelpicon}}
                </div>
                {{#audio.tracks.descriptions}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="description-audio-url-input">
                                    {{#str}} descriptionssourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="description-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="description-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="description-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="description-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="description-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} adddescriptionstrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.descriptions}}
                {{^audio.tracks.descriptions}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="description-audio-url-input">
                                    {{#str}} descriptionssourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="description-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="description-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="description-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="description-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="description-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} adddescriptionstrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.descriptions}}
            </div>
            <div data-track-kind="chapters" class="tab-pane"
                 id="{{elementid}}_atracks_chapters">
                <div class="trackhelp">
                    {{#chaptershelpicon}}
                        {{> core/help_icon }}
                    {{/chaptershelpicon}}
                </div>
                {{#audio.tracks.chapters}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="chapter-audio-url-input">
                                    {{#str}} chapterssourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="chapter-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="chapter-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="chapter-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="chapter-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="chapter-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addchapterstrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.chapters}}
                {{^audio.tracks.chapters}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="chapter-audio-url-input">
                                    {{#str}} chapterssourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="chapter-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="chapter-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="chapter-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="chapter-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="chapter-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addchapterstrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.chapters}}
            </div>
            <div data-track-kind="metadata" class="tab-pane"
                 id="{{elementid}}_atracks_metadata">
                <div class="trackhelp">{{{helpStrings.metadata}}}</div>
                <div class="trackhelp">
                    {{#metadatahelpicon}}
                        {{> core/help_icon }}
                    {{/metadatahelpicon}}
                </div>
                {{#audio.tracks.metadata}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="metadata-audio-url-input">
                                    {{#str}} metadatasourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="metadata-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="metadata-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="metadata-audio-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="metadata-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="metadata-audio-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addmetadatatrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.metadata}}
                {{^audio.tracks.metadata}}
                    <div class="mb-1 tiny_media_track">
                        <div class="tiny_media_source tiny_media_track_source">
                            <div class="mb-1">
                                <label for="metadata-audio-url-input">
                                    {{#str}} metadatasourcelabel, tiny_media {{/str}}
                                </label>
                                <div class="input-group input-append w-100">
                                    <input id="metadata-audio-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
                                    {{#showfilepickertrack}}
                                    <span class="input-group-append">
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
                                    </span>
                                    {{/showfilepickertrack}}
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="metadata-audio-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
                            <select id="metadata-audio-lang-input" class="custom-select tiny_media_track_lang_entry">
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
                                    {{#langsinstalled}}
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
                                    {{/langsinstalled}}
                                </optgroup>
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
                                    {{#langsavailable}}
                                        <option value="{{code}}">{{lang}}</option>
                                    {{/langsavailable}}
                                </optgroup>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="w-100" for="metadata-audio-track-input">{{#str}} label, tiny_media {{/str}}</label>
                            <input id="metadata-audio-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
                        </div>
                        <div class="addcomponent-wrapper">
                            <a href="#" class="addcomponent">
                                {{#str}} addmetadatatrack, tiny_media {{/str}}
                            </a>
                        </div>
                        <div class="removecomponent-wrapper hidden">
                            <a href="#" class="removecomponent">
                                {{#str}} remove, tiny_media {{/str}}
                            </a>
                        </div>
                    </div>
                {{/audio.tracks.metadata}}
            </div>
        </div>
    </div>
</fieldset>