<textarea id='{{widget.name}}' name="{{ widget.name }}">{{ widget.value }}</textarea>


<!--AI Modal-->
{% include "snippets/llm_modal_snippet.html" with id=widget.name|add:"bloomAi" query_type="tiny_mce_content" title="Generate content" %}
<!--End AI Modal-->


<script>
	(async function() {
		let widget = '{{widget.name | safe }}';


		if (tinymce.get(widget)) {			
			tinymce.get(widget).remove();
		}

		
		tinymce.init({
			selector: `textarea[id='${widget}']`,
			plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table code',
			toolbar: 'undo redo | blocks | bold italic underline | numlist bullist | table | code | media | ai' ,
			setup: function (editor) {
				// Magic happens here
				editor.ui.registry.addButton('ai', {
					text: 'AI',
					onAction: function () {
						// Show the modal
						const modal = new bootstrap.Modal(document.getElementById("modal_{{ widget.name }}bloomAi"));
						modal.show();
					}
				});
			}
		});


		// Add llm event listener to if a div changes content
		let llm_output_div = document.getElementById('llm_output_{{ widget.name }}bloomAi');
		
		// Add event listener to the div
		llm_output_div.addEventListener('llm-inserted', function(e) {
			// Set the content to the widget
			tinymce.get(widget).setContent(llm_output_div.innerHTML);
		});
		


	})();
</script>

