{{!
    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/body/media_details_body

    Media preview body template.

    Example context (json):
    {
        "isLink": true,
        "isVideo": true,
        "isAudioTag": true,
        "isVideoTag": true,
        "elementid": "id",
        "media" : {
            "poster": "link/to/poster",
            "title": "media name/title",
            "isUpdating": true,
            "controls": true,
            "autoplay": false,
            "muted": false,
            "loop": false,
            "width": "1200",
            "height": "800"
        }
    }

}}
<div id="tiny-media-details-body" class="d-none">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 p-0">
                <div class="tiny_media_preview_box border rounded">
                    <button class="btn btn-secondary rounded-circle tiny_media_delete_icon" tabindex="0" title="{{#str}} deletemedia, tiny_media {{/str}}">
                        <i class="fa fa-trash-o"></i>
                    </button>
                    <div id="media-filter-preview-container" class="w-100 text-center"></div>
                </div>
            </div>
            <div class="tiny_media_properties_col col-lg-5 tiny_media_source tiny_media_poster_source">
                <div class="mb-2">
                    <div>
                        <label for="{{elementid}}_tiny_media_title_entry">{{#str}} entertitle, tiny_media {{/str}}</label>
                        <div class="input-group-append">
                            <input
                                class="tiny_media_title_entry form-control"
                                type="text"
                                id="{{elementid}}_tiny_media_title_entry"
                                size="32"
                                {{#media.title}}value="{{media.title}}"{{/media.title}}
                            >
                        </div>
                    </div>
                    {{#isVideo}}
                        <div class="video-thumbnail">
                            <div class="input-group-append mt-2">
                                <button class="btn btn-primary upload-custom-thumbnail" type="button">
                                    {{#media.poster}}
                                        {{#str}} changethumbnail, tiny_media {{/str}}
                                    {{/media.poster}}
                                    {{^media.poster}}
                                        {{#str}} uploadthumbnail, tiny_media {{/str}}
                                    {{/media.poster}}
                                </button>
                            </div>
                            {{#media.poster}}
                                <div class="input-group-append mt-2">
                                    <button class="btn btn-secondary delete-custom-thumbnail" type="button">{{#str}} deleteembeddedthumbnail, tiny_media {{/str}}</button>
                                </div>
                            {{/media.poster}}
                        </div>
                    {{/isVideo}}
                </div>
                {{#showControl}}
                    <div class="mt-4">
                        <div class="input-group-append">
                            <input
                                type="checkbox"
                                class="form-check-input tiny_media_controls"
                                id="vadvancedsettings_media-controls-toggle"
                                {{#isNewFileOrLinkUpload}}checked{{/isNewFileOrLinkUpload}}
                                {{#media.controls}}checked{{/media.controls}}
                            >
                            <label class="form-check-label" for="vadvancedsettings_media-controls-toggle">
                                {{#str}} controls, tiny_media {{/str}}
                            </label>
                        </div>
                        <div class="input-group-append">
                            <input
                                type="checkbox"
                                class="form-check-input tiny_media_autoplay"
                                id="vadvancedsettings_media-autoplay-toggle"
                                {{#media.autoplay}}checked{{/media.autoplay}}
                            >
                            <label class="form-check-label" for="vadvancedsettings_media-autoplay-toggle">
                                {{#str}} autoplay, tiny_media {{/str}}
                            </label>
                        </div>
                        <div class="input-group-append">
                            <input
                                type="checkbox"
                                class="form-check-input tiny_media_mute"
                                id="vadvancedsettings_media-mute-toggle"
                                {{#media.muted}}checked{{/media.muted}}
                            >
                            <label class="form-check-label" for="vadvancedsettings_media-mute-toggle">
                                {{#str}} mute, tiny_media {{/str}}
                            </label>
                        </div>
                        <div class="input-group-append">
                            <input
                                type="checkbox"
                                class="form-check-input tiny_media_loop"
                                id="vadvancedsettings_media-loop-toggle"
                                {{#media.loop}}checked{{/media.loop}}
                            >
                            <label class="form-check-label" for="vadvancedsettings_media-loop-toggle">
                                {{#str}} loop, tiny_media {{/str}}
                            </label>
                        </div>
                    </div>

                    {{#isVideo}}
                        <div class="media-size-properties">
                            <hr>
                            <div>
                                <input type="radio" class="tiny_media_sizeoriginal form-check-input" id="{{elementid}}_tiny_media_sizeoriginal" name="radioOptions">
                                <label class="form-check-label" for="{{elementid}}_tiny_media_sizeoriginal">{{#str}} sizeoriginal, tiny_media {{/str}}</label>
                            </div>
                            <div>
                                <input type="radio" class="tiny_media_sizecustom form-check-input" id="{{elementid}}_tiny_media_sizecustom" name="radioOptions">
                                <label class="form-check-label" for="{{elementid}}_tiny_media_sizecustom">{{#str}} sizecustom, tiny_media {{/str}}</label>
                                {{#isLink}}
                                    {{#linkcustomsizehelpicon}}
                                        {{> core/help_icon }}
                                    {{/linkcustomsizehelpicon}}
                                {{/isLink}}
                                {{^isLink}}
                                    {{#customsizehelpicon}}
                                        {{> core/help_icon }}
                                    {{/customsizehelpicon}}
                                {{/isLink}}
                            </div>
                            <div class="form-check mt-2 tiny_media_properties">
                                <div class="d-flex justify-content-start">
                                    <div class="me-2">
                                        <div class="mb-0">
                                            <input
                                                type="number"
                                                min="0"
                                                class="tiny_media_width_entry form-control me-1 input-mini"
                                                id="{{elementid}}_tiny_media_width_entry"
                                                value="{{media.width}}"
                                                placeholder="1200"
                                            >
                                            <label for="{{elementid}}_tiny_media_width_entry" class="ms-1">{{#str}} width, tiny_media {{/str}}</label>
                                        </div>
                                    </div>
                                    <div class="me-1 mt-2">X</div>
                                    <div class="me-1">
                                        <div class="mb-0">
                                            <input
                                                type="number"
                                                min="0"
                                                placeholder="800"
                                                class="tiny_media_height_entry form-control ms-1 input-mini"
                                                id="{{elementid}}_tiny_media_height_entry"
                                                value="{{media.height}}"
                                            >
                                            <label for="{{elementid}}_tiny_media_height_entry" class="ms-1">{{#str}} height, tiny_media {{/str}}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/isVideo}}
                {{/showControl}}
            </div>
        </div>
    </div>
</div>

<div id="tiny-media-subtitle-caption-body" class="d-none">
    <div class="container">
        {{> tiny_media/embed/insert_media_subtitle_caption }}
    </div>
</div>
