{{!
    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_edusharing/modal

    Modal to insert edu-sharing content within the Tiny Editor.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:

    Example context (json):
    {
        "elementid": "exampleId"
    }
}}

{{< core/modal }}

    {{$title}}
        {{#str}} modaltitle, tiny_edusharing {{/str}}
        <input type="hidden" value="{{#str}} editModalTitle, tiny_edusharing{{/str}}"/>
    {{/title}}

    {{$body}}
        <div class="p-2 d-none" id="eduAttoCaptionPrompt">
            <div class="alert alert-warning" role="alert">
                <p>{{#str}} attoCaptionPrompt, tiny_edusharing{{/str}}</p>
                <p id="eduCaptionText"></p>
                <div class="form-check eduCaptionRadio">
                    <input class="form-check-input" type="radio" name="eduCaption" id="eduCaption1" value="0" checked>
                    <label class="form-check-label" for="eduCaption1">
                        {{#str}} thisCaption, tiny_edusharing{{/str}}
                    </label>
                </div>
                <div class="form-check eduCaptionRadio">
                    <input class="form-check-input" type="radio" name="eduCaption" id="eduCaption2" value="1">
                    <label class="form-check-label" for="eduCaption2">
                        {{#str}} otherCaption, tiny_edusharing{{/str}}
                    </label>
                </div>
            </div>
        </div>
        <div id="eduNoEditInfo" class="p-2 d-none">{{#str}} noEditInfo, tiny_edusharing{{/str}}</div>
        <form class="mform">
            <div class="p-2 container" id="repoButtonContainer">
                <div class="row">
                    <div class="col-6">
                        <div class="pb-2">
                            {{#str}} instructions, tiny_edusharing{{/str}}
                        </div>
                        <button class="btn btn-primary" type="button" data-target="edusharing">
                            {{#str}} browserepository, tiny_edusharing{{/str}}</button>
                    </div>
                    <div class="col-6 p-1">
                        <img id="eduInstructionGif" src="/lib/editor/tiny/plugins/edusharing/pix/help_en.gif" alt="edu-sharing animated instructions" width="100%" height="auto">
                    </div>
                </div>
            </div>
            <div id="nodeOptionsForm" class="p-2 container d-none">
                <div class="row">
                    <div class="col-6">
                        <div id="objectVersioningContainer" class="pb-2">
                            <h5> {{#str}} objectVersioning, tiny_edusharing{{/str}}</h5>
                            <div class="eduNonVersionableHint d-none">{{#str}} nonVersionableHint, tiny_edusharing{{/str}}</div>
                            <div class="form-check eduVersionRadio">
                                <input class="form-check-input" type="radio" name="eduVersion" id="eduVersion1" value="0" checked>
                                <label class="form-check-label" for="eduVersion1">
                                    {{#str}} newestVersion, tiny_edusharing{{/str}}
                                </label>
                            </div>
                            <div class="form-check eduVersionRadio">
                                <input class="form-check-input" type="radio" name="eduVersion" id="eduVersion2" value="1">
                                <label class="form-check-label" for="eduVersion2">
                                    {{#str}} thisVersion, tiny_edusharing{{/str}}
                                </label>
                            </div>
                        </div>
                        <div class="mb-3" id="eduCaptionContainer">
                            <h5>{{#str}} caption, tiny_edusharing{{/str}}</h5>
                            <input type="text" class="form-control" id="captionInput">
                        </div>
                        <div class="mb-3">
                            <h5>{{#str}} alignment, tiny_edusharing{{/str}}</h5>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="eduAlignment" id="eduAlignment1" value="left">
                                <label class="form-check-label" for="eduAlignment1">
                                    {{#str}} floatLeft, tiny_edusharing{{/str}}
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="eduAlignment" id="eduAlignment2" value="right">
                                <label class="form-check-label" for="eduAlignment2">
                                    {{#str}} floatRight, tiny_edusharing{{/str}}
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="eduAlignment" id="eduAlignment3" value="none" checked>
                                <label class="form-check-label" for="eduAlignment3">
                                    {{#str}} alignmentNone, tiny_edusharing{{/str}}
                                </label>
                            </div>
                        </div>
                        <div class="mb-3" id="eduWidthContainer">
                            <h5>{{#str}} dimensions, tiny_edusharing{{/str}}</h5>
                            <div class="form-group">
                                <label for="eduWidth">{{#str}} width, tiny_edusharing{{/str}}</label>
                                <input type="number" class="form-control" id="eduWidth" min="0" step="1"/>
                                <label for="eduHeight">{{#str}} height, tiny_edusharing{{/str}}</label>
                                <input type="number" class="form-control" id="eduHeight" min="0" step="1"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-6" id="eduContentPreview">
                        <h5 id="eduContentTitle"></h5>
                        <div class="p-1">
                            <img id="eduPreviewImage" src="" alt="" width="100%" height="auto"/>
                        </div>
                    </div>
                </div>
            </div>
            <input id="edusharing_node" name="edusharing_node" type="hidden" value=""/>
            <input id="edusharingNoWidth" name="edusharingNoWidth" type="hidden" value=""/>
        </form>
    {{/body}}

    {{$footer}}
        <button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel, moodle {{/str}}</button>
        <button type="button" id="eduSubmitButton" class="btn btn-primary" data-action="save" data-secondary-title="{{#str}} edit, tiny_edusharing{{/str}}" disabled>{{#str}} insert, tiny_edusharing{{/str}}</button>
        <button type="button" id="eduCaptionContinueButton" class="btn btn-primary d-none">{{#str}} continue, tiny_edusharing{{/str}}</button>
    {{/footer}}
{{/ core/modal }}
