{{!
    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/insert_image_modal_details

    Insert image details body template.

    Example context (json):
    {
        "elementid": "exampleId",
        "alt": "Image description",
        "presentation": true,
        "width": 600,
        "height": 400,
        "customStyle": "",
        "sizecustomhelpicon": {
            "text": "Help text"
        }
    }

}}
<div class="tiny_imagecms_image_details">
    <div class="container">
        <div class="row">
            <!-- Column 1: Image Preview and Description -->
            <div class="tiny_imagecms_preview_col col-lg-7 p-0">
                <input type="hidden" class="tiny_imagecms_customstyle" value="{{customStyle}}">
                <!-- Row 1: Image preview -->
                <div class="tiny_imagecms_preview_box border rounded">
                    <!-- Delete image icon -->
                    <div class="tiny_imagecms_deleteicon" tabindex="0" title="{{#str}} deleteimage, tiny_mediacms {{/str}}">
                        <i class="fa fa-trash-o" title="{{#str}} deleteimage, tiny_mediacms {{/str}}"></i>
                    </div>
                    <!-- Image placeholder -->
                    <img class="tiny_imagecms_preview" src="data:," alt>
                </div>
                <!-- Row 2: Image description -->
                <div class="form-group mt-3">
                    <label for="{{elementid}}_tiny_imagecms_altentry">{{#str}} enteralt, tiny_mediacms {{/str}}</label>
                    <textarea class="tiny_imagecms_altentry form-control fullwidth" id="{{elementid}}_tiny_imagecms_altentry" name="altentry" maxlength="125">{{alt}}</textarea>
                    <!-- Character counter -->
                    <div id="the-count" class="d-flex justify-content-end small">
                        <span id="currentcount">0</span>
                        <span id="maximumcount"> / 125</span>
                    </div>
                </div>
            </div>
            <!-- Column 2: Checkbox and Radio Buttons -->
            <div class="tiny_imagecms_properties_col col-lg-5">
                <!-- Row 1: Image presentation role -->
                <div class="form-check mb-2">
                    <input type="checkbox" class="tiny_imagecms_presentation form-check-input" id="{{elementid}}_tiny_imagecms_presentation" {{# presentation }}checked{{/ presentation }}>
                    <label class="form-check-label" for="{{elementid}}_tiny_imagecms_presentation">{{#str}} presentation, tiny_mediacms {{/str}}</label>
                </div>
                <!-- Row 2: Original size radiobutton -->
                <div class="form-check mb-2 ps-0">
                    <input type="radio" class="tiny_imagecms_sizeoriginal" id="{{elementid}}_tiny_imagecms_sizeoriginal" name="radioOptions">
                    <label class="form-check-label" for="{{elementid}}_tiny_imagecms_sizeoriginal">{{#str}} sizeoriginal, tiny_mediacms {{/str}}</label>
                </div>
                <!-- Row 3: Custom size radiobutton -->
                <div class="form-check ps-0 mb-2">
                    <input type="radio" class="tiny_imagecms_sizecustom" id="{{elementid}}_tiny_imagecms_sizecustom" name="radioOptions">
                    <label class="form-check-label" for="{{elementid}}_tiny_imagecms_sizecustom">{{#str}} sizecustom, tiny_mediacms {{/str}}</label>
                </div>
                <!-- Row 4: Image size -->
                <div class="tiny_imagecms_properties mb-2">
                    <!-- Row 1: Image width and height -->
                    <div id="{{elementid}}_tiny_imagecms_size" class="tiny_imagecms_size container ms-1">
                        <div class="d-flex justify-content-start">
                            <!-- Column 1: Width Input -->
                            <div class="flex-item me-2">
                                <div class="form-group mb-0">
                                    <input type="number" min="0" class="tiny_imagecms_widthentry form-control me-1 input-mini" id="{{elementid}}_tiny_imagecms_widthentry" value="{{width}}">
                                    <label for="{{elementid}}_tiny_imagecms_widthentry" class="ms-1">{{#str}} width, tiny_mediacms {{/str}}</label>
                                </div>
                            </div>
                            <!-- Column 2: "X" Text -->
                            <div class="flex-item me-1 mt-2">X</div>
                            <!-- Column 3: Height Input -->
                            <div class="flex-item me-1">
                                <div class="form-group mb-0">
                                    <input type="number" min="0" class="tiny_imagecms_heightentry form-control ms-1 input-mini" id="{{elementid}}_tiny_imagecms_heightentry" value="{{height}}">
                                    <label for="{{elementid}}_tiny_imagecms_heightentry" class="ms-1">{{#str}} height, tiny_mediacms {{/str}}</label>
                                </div>
                            </div>
                            <div class="tiny_imagecms_customhelpicon flex-item ms-1">{{#sizecustomhelpicon}}{{> core/help_icon }}{{/sizecustomhelpicon}}</div>
                        </div>
                    </div>
                    <!-- Row 2: Keep proportion -->
                    <div class="form-check mb-2">
                        <input type="checkbox" class="tiny_imagecms_constrain form-check-input" id="{{elementid}}_tiny_imagecms_constrain">
                        <label class="form-check-label" for="{{elementid}}_tiny_imagecms_constrain">{{#str}} constrain, tiny_mediacms {{/str}}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>