{{!
    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_mediacms/iframe_embed_options

    Embed options partial for iframe modal.

    Example context (json):
    {
        "elementid": "editor1",
        "showTitle": true,
        "linkTitle": true,
            "showUserAvatar": true,
        "responsive": true,
        "startAtEnabled": false,
        "startAt": "0:00"
    }
}}
<!-- Embed Options -->
<div class="mb-3">
    <label class="form-label font-weight-bold">
        {{#str}} embedoptions, tiny_mediacms {{/str}}
    </label>
    <div class="row">
        <div class="col-6">
            <div class="form-check mb-2">
                <input type="checkbox" class="form-check-input tiny_iframecms_showtitle" 
                       id="{{elementid}}_showtitle" {{#showTitle}}checked{{/showTitle}}>
                <label class="form-check-label" for="{{elementid}}_showtitle">
                    {{#str}} showtitle, tiny_mediacms {{/str}}
                </label>
            </div>
            <div class="form-check mb-2">
                <input type="checkbox" class="form-check-input tiny_iframecms_linktitle" 
                       id="{{elementid}}_linktitle" {{#linkTitle}}checked{{/linkTitle}}>
                <label class="form-check-label" for="{{elementid}}_linktitle">
                    {{#str}} linktitle, tiny_mediacms {{/str}}
                </label>
            </div>
            <div class="form-check mb-2">
                <input type="checkbox" class="form-check-input tiny_iframecms_textlinkonly"
                       id="{{elementid}}_textlinkonly" {{#textLinkOnly}}checked{{/textLinkOnly}}>
                <label class="form-check-label" for="{{elementid}}_textlinkonly">
                    {{#str}} textlinkonly, tiny_mediacms {{/str}}
                </label>
            </div>
        </div>
        <div class="col-6">
            <div class="form-check mb-2">
                <input type="checkbox" class="form-check-input tiny_iframecms_showuseravatar"
                       id="{{elementid}}_showuseravatar" {{#showUserAvatar}}checked{{/showUserAvatar}}>
                <label class="form-check-label" for="{{elementid}}_showuseravatar">
                    {{#str}} showuseravatar, tiny_mediacms {{/str}}
                </label>
            </div>
            <div class="form-check mb-2 d-flex align-items-center">
                <input type="checkbox" class="form-check-input tiny_iframecms_startat_enabled"
                       id="{{elementid}}_startat_enabled" {{#startAtEnabled}}checked{{/startAtEnabled}}>
                <label class="form-check-label ms-2 me-2" for="{{elementid}}_startat_enabled">
                    {{#str}} startat, tiny_mediacms {{/str}}
                </label>
                <input type="text" class="form-control form-control-sm tiny_iframecms_startat"
                       id="{{elementid}}_startat" value="{{startAt}}" placeholder="0:00" style="width: 70px;">
            </div>
        </div>
    </div>
</div>

<!-- Dimensions -->
<div class="mb-3">
    <label class="form-label font-weight-bold">
        {{#str}} dimensions, tiny_mediacms {{/str}}
    </label>
    <div class="row">
        <div class="col-6">
            <div class="input-group">
                <input type="number" class="form-control tiny_iframecms_width"
                       id="{{elementid}}_width" value="{{width}}" placeholder="560" min="1" step="1">
                <span class="input-group-text">px</span>
            </div>
            <small class="text-muted">{{#str}} width, tiny_mediacms {{/str}}</small>
        </div>
        <div class="col-6">
            <div class="input-group">
                <input type="number" class="form-control tiny_iframecms_height"
                       id="{{elementid}}_height" value="{{height}}" placeholder="315" min="1" step="1">
                <span class="input-group-text">px</span>
            </div>
            <small class="text-muted">{{#str}} height, tiny_mediacms {{/str}}</small>
        </div>
    </div>
</div>
