{% comment %}
Rich-text field with formatting tools and a searchable Template command, also available
as /template. Templates are filtered by user access, without content-type restrictions.
Selection inserts an editable copy at the cursor or replaces selected text.
The bubbling, cancellable bloomerp:template-selected event carries detail.template
(id, name, body) and detail.insert(body). Specialized editors can preventDefault(),
prepare their variable context, then call insert to preserve the original selection.
{% endcomment %}
{% load bloomerp %}
{% generate_uuid as editor_uuid %}
{% with editor_id=editor_uuid|add:"-"|add:name %}

<div 
    bloomerp-component="bloomerp-text-editor" 
    class="relative rounded-xl {% if not height %}{% if compact %}min-h-36{% else %}min-h-72{% endif %}{% endif %} {% if has_border %}border border-gray-300 {% if not disabled %}focus-within:border-primary focus-within:ring-1 focus-within:ring-primary{% endif %}{% endif %} {% if disabled %}bg-gray-100 cursor-not-allowed{% endif %} {{ class|default:'' }}"
    data-template-search-url="{% url 'components_text_editor_templates' %}"
    data-placeholder="{{ placeholder|default:'' }}"
    data-disabled="{{ disabled|yesno:'true,false' }}"
    data-styling="{{ styling|default:'' }}"
    data-override-default-styling="{{ override_default_styling|default:'False'}}"
    data-name="{{ name }}"
    data-actions-toolbar-section-id="{{ actions_toolbar_section_id }}"
    data-editor-id="{{ editor_id }}"
    data-include-toolbar="{{ include_toolbar }}"
    {% if height %}style="height: {{ height }};"{% endif %}
    >
    <style id="text-editor-styling-{{ editor_id }}"></style>

    <!--Toolbar-->
    {% if include_toolbar != False and include_toolbar != "false" and include_toolbar != "False" %}
    <div class="" id="actions-toolbar-{{ editor_id }}"></div>
    {% endif %}
    <!--End toolbar-->
    <div id="editor-{{ editor_id }}" class="outline-none bloomerp-text-editor" contenteditable></div>
    <input type="hidden" data-text-editor-input="true" name="{{ name }}" value="{{ value }}" id="id_{{ name }}">
</div>
{% endwith %}