From 841b2e2ca23355d35a6355649fcf52a6dc5d18c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Tue, 4 Mar 2025 07:54:30 +0100
Subject: [PATCH] MDL-84705 AI: Fix image model form buttons

-After Bootstrap 5 upgrade in MDL-75669 the AI image model form buttons
were not working correctly. Fix the related syntax to BS5.
- Fix some deprecated 'form-group' usages
---
 .../templates/imagecontrols.mustache          | 87 ++++++++++---------
 .../insert_image_modal_details.mustache       |  6 +-
 2 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/lib/editor/tiny/plugins/aiplacement/templates/imagecontrols.mustache b/lib/editor/tiny/plugins/aiplacement/templates/imagecontrols.mustache
index 0e6bed5f3f4..be53525aff7 100644
--- a/lib/editor/tiny/plugins/aiplacement/templates/imagecontrols.mustache
+++ b/lib/editor/tiny/plugins/aiplacement/templates/imagecontrols.mustache
@@ -15,7 +15,7 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template tiny_aiplacement/imagecontrol
+    @template tiny_aiplacement/imagecontrols
 
     Modal to manage AI generated image content within the Tiny Editor.
 
@@ -34,7 +34,7 @@
     }
 }}
 <div class="tiny-aiplacement-image-options">
-    <div class="form-group">
+    <div class="mb-3">
         <label for="{{elementid}}_tiny_aiplacement_imageprompt" class="fw-bold">
             {{#str}} imageprompt_label, tiny_aiplacement {{/str}}
         </label>
@@ -49,24 +49,26 @@
         {{#str}} imagequality, tiny_aiplacement{{/str}}
     </span>
     <div class="tiny-aiplacement-toggle-container mt-1 mb-1">
-        <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
-            <label class="btn btn-outline-secondary active">
-                <input
-                        type="radio"
-                        class="btn-check"
-                        name="quality"
-                        value="standard"
-                        checked
-                >
+        <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>
-            <label class="btn btn-outline-secondary">
-                <input
-                        type="radio"
-                        class="btn-check"
-                        name="quality"
-                        value="hd"
-                >
+            <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>
@@ -75,35 +77,38 @@
         {{#str}} aspectratio, tiny_aiplacement{{/str}}
     </span>
     <div class="tiny-aiplacement-aspect-ratio-container mt-1 mb-1">
-        <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
-            <label class="btn btn-outline-secondary active">
-                <input
-                        type="radio"
-                        class="btn-check"
-                        name="aspect-ratio"
-                        value="square"
-                        checked
-                >
+        <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>
-            <label class="btn btn-outline-secondary">
-                <input
-                        type="radio"
-                        class="btn-check"
-                        name="aspect-ratio"
-                        value="landscape"
-                >
+            <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>
-            <label class="btn btn-outline-secondary">
-                <input
-                        type="radio"
-                        class="btn-check"
-                        name="aspect-ratio"
-                        value="portrait"
-                >
+            <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>
diff --git a/lib/editor/tiny/plugins/media/templates/insert_image_modal_details.mustache b/lib/editor/tiny/plugins/media/templates/insert_image_modal_details.mustache
index e4ef46b2ee5..0df47763f06 100644
--- a/lib/editor/tiny/plugins/media/templates/insert_image_modal_details.mustache
+++ b/lib/editor/tiny/plugins/media/templates/insert_image_modal_details.mustache
@@ -50,7 +50,7 @@
                     <img class="tiny_image_preview" src="data:," alt>
                 </div>
                 <!-- Row 2: Image description -->
-                <div class="form-group mt-3">
+                <div class="mt-3">
                     <label for="{{elementid}}_tiny_image_altentry">{{#str}} enteralt, tiny_media {{/str}}</label>
                     <textarea class="tiny_image_altentry form-control fullwidth" id="{{elementid}}_tiny_image_altentry" name="altentry" maxlength="{{maxlengthalt}}">{{alt}}</textarea>
                     <!-- Character counter -->
@@ -85,7 +85,7 @@
                         <div class="d-flex justify-content-start">
                             <!-- Column 1: Width Input -->
                             <div class="flex-item me-2">
-                                <div class="form-group mb-0">
+                                <div>
                                     <input type="number" min="0" class="tiny_image_widthentry form-control me-1 input-mini" id="{{elementid}}_tiny_image_widthentry" value="{{width}}">
                                     <label for="{{elementid}}_tiny_image_widthentry" class="ms-1">{{#str}} width, tiny_media {{/str}}</label>
                                 </div>
@@ -94,7 +94,7 @@
                             <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">
+                                <div>
                                     <input type="number" min="0" class="tiny_image_heightentry form-control ms-1 input-mini" id="{{elementid}}_tiny_image_heightentry" value="{{height}}">
                                     <label for="{{elementid}}_tiny_image_heightentry" class="ms-1">{{#str}} height, tiny_media {{/str}}</label>
                                 </div>