{{!
    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_aiplacement/imagecontrols

    Modal to manage AI generated image content within the Tiny Editor.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
    * elementid: The id of the element that will be used to create the modal.

    Example context (json):
    {
        "elementid": "exampleId"
    }
}}
<div class="tiny-aiplacement-image-options">
    <div class="mb-3">
        <label for="{{elementid}}_tiny_aiplacement_imageprompt" class="fw-bold">
            {{#str}} imageprompt_label, tiny_aiplacement {{/str}}
        </label>
        <textarea
                class="form-control"
                id="{{elementid}}_tiny_aiplacement_imageprompt"
                rows="3"
                placeholder="{{#str}} imageprompt_placeholder, tiny_aiplacement {{/str}}"
        ></textarea>
    </div>
    <span class="fw-bold">
        {{#str}} imagequality, tiny_aiplacement{{/str}}
    </span>
    <div class="tiny-aiplacement-toggle-container mt-1 mb-1">
        <div class="btn-group w-100" role="group" aria-label="{{#str}} imagequality, tiny_aiplacement{{/str}}">
            <input
                type="radio"
                class="btn-check"
                name="quality"
                value="standard"
                id="quality-standard"
                checked
            >
            <label class="btn btn-outline-secondary" for="quality-standard">
                {{#str}} definitionstandard, tiny_aiplacement{{/str}}
            </label>
            <input
                type="radio"
                class="btn-check"
                name="quality"
                value="hd"
                id="quality-hd"
            >
            <label class="btn btn-outline-secondary" for="quality-hd">
                {{#str}} definitionhigh, tiny_aiplacement{{/str}}
            </label>
        </div>
    </div>
    <span class="fw-bold">
        {{#str}} aspectratio, tiny_aiplacement{{/str}}
    </span>
    <div class="tiny-aiplacement-aspect-ratio-container mt-1 mb-1">
        <div class="btn-group w-100" role="group" aria-label="{{#str}} aspectratio, tiny_aiplacement{{/str}}">
            <input
                type="radio"
                class="btn-check"
                name="aspect-ratio"
                value="square"
                id="aspect-square"
                checked
            >
            <label class="btn btn-outline-secondary" for="aspect-square">
                <span class="d-block"><i class="fas fa-square"></i></span>
                {{#str}} aspectsquare, tiny_aiplacement{{/str}}
            </label>
            <input
                type="radio"
                class="btn-check"
                name="aspect-ratio"
                value="landscape"
                id="aspect-landscape"
            >
            <label class="btn btn-outline-secondary" for="aspect-landscape">
                <span class="d-block"><i class="fas fa-mobile fa-rotate-90"></i></span>
                {{#str}} aspectlandscape, tiny_aiplacement{{/str}}
            </label>
            <input
                type="radio"
                class="btn-check"
                name="aspect-ratio"
                value="portrait"
                id="aspect-portrait"
            >
            <label class="btn btn-outline-secondary" for="aspect-portrait">
                <span class="d-block"><i class="fas fa-mobile"></i></span>
                {{#str}} aspectportrait, tiny_aiplacement{{/str}}
            </label>
        </div>
    </div>
</div>
