{% load wagtailadmin_tags custom_code_editor_helper %}
<div data-custom-code-editor-target="container" data-id="{{ widget.attrs.id }}" class="editor-container editor-{{ widget.attrs.id }}" {% for k, v in widget.attrs.items %}{{k}}="{{v}}"{% endfor %}>
  {% if widget.enable_modes %}
  <div class="dropdown">
    <button class="button-dropdown result">{% if not widget.django_admin %}{% icon name="arrow-down" classname="icon-ace" title="Modes" %}{% else %}<svg class="icon-ace" id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFFFF"><defs><style>.cls-1{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.00px;}</style></defs><polyline class="cls-1" points="21 7.59 12 16.41 3 7.59"></polyline></svg>{% endif %}<span class="text-mode"></span></button>
    <div class="dropdown-content" style="display: none;">
      <input type="text" placeholder="Search..." class="my-input mode-search search-bar">
      <ul style="padding: 0; margin: 0;">
        {% for mode in widget.modes %}
          <li class="modes-lists" {% if mode.title %}data-title="{{ mode.title }}"{% endif %} data-name="{{ mode.name | lower }}">{% if mode.title %}{{ mode.title }}{% else %}{{ mode.name | title }}{% endif %}</li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}
  {% if widget.label %}
    <label for="{{ widget.attrs.id }}"><strong>{{widget.label}}:</strong></label>
  {% endif %}
  <textarea id="{{ widget.attrs.id }}" style="width:{{ widget.width }};height:{{ widget.height }};" name="{{ widget.name }}"
    {% if widget.required %}required=""{% endif %}>{{ widget.value }}</textarea>
  <div class="code-snippet-wrapper editor" id="{{ widget.attrs.id }}-wrapper"></div>
  {% if widget.enable_modes %}
  <div class="switch-container">
      <button class="switch">{% if not widget.django_admin %}{% icon name="lock" classname="lock-ace" title="Lock Editor" %}{% else %}<svg class="lock-ace" id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FEFEFE"><path d="M5.3,10a1,1,0,0,0-1,1V21a1,1,0,0,0,1,1h14a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1Zm8,6.78a1,1,0,0,1-2,0v-2a1,1,0,1,1,2,0Z" fill="#FEFEFE"></path><path d="M17.3,7v5.48h-2V7a3,3,0,0,0-.89-2.13A3,3,0,0,0,12.3,4a3,3,0,0,0-3,3v5.48h-2V7a5,5,0,0,1,10,0Z" fill="#FEFEFE"></path></svg>{% endif %}<b>Read Only Mode - </b> Unlock it by clicking this button</button>
  </div>
  {% endif %}
  {% if widget.enable_options %}
  <div class="options-config">
    <button class="button-options" title="Adjust Options">
        {% if not widget.django_admin %}
            {% icon name="cog" classname="icon-ace" title="Adjust Options" %}
        {% else %}
            <svg class="icon-ace" id="Layer_4" data-name="Layer 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" fill="#F9F9F9"><path d="M25.85,47.62l-7.11,12.3A10,10,0,0,0,22.4,73.58L28,76.81a14.72,14.72,0,0,1,7.32,14c-.16,1.66-.23,3.34-.23,5.14s.08,3.58.24,5.31A14.57,14.57,0,0,1,28,115.18l-5.62,3.24a10,10,0,0,0-3.66,13.66l7.11,12.3A10,10,0,0,0,39.51,148l5.62-3.25a14.76,14.76,0,0,1,15.85.7,59.54,59.54,0,0,0,8.9,5.15A14.73,14.73,0,0,1,78.34,164v6.48a10,10,0,0,0,10,10h14.2a10,10,0,0,0,10-10V164A14.74,14.74,0,0,1,121,150.64a59.64,59.64,0,0,0,8.91-5.15,14.75,14.75,0,0,1,15.84-.7l5.63,3.25A10,10,0,0,0,165,144.38l7.1-12.3a10,10,0,0,0-3.66-13.66l-5.6-3.24a14.62,14.62,0,0,1-7.33-13.94c.16-1.73.25-3.47.25-5.24s-.09-3.51-.25-5.24a14.62,14.62,0,0,1,7.33-13.94l5.6-3.24a10,10,0,0,0,3.66-13.66L165,47.62A10,10,0,0,0,151.37,44l-5.63,3.25a14.75,14.75,0,0,1-15.84-.7A59.64,59.64,0,0,0,121,41.36,14.74,14.74,0,0,1,112.54,28V21.54a10,10,0,0,0-10-10H88.34a10,10,0,0,0-10,10V27.6a15.3,15.3,0,0,1-8.87,13.85,55,55,0,0,0-8.41,4.9,14.83,14.83,0,0,1-16,.82L39.51,44A10,10,0,0,0,25.85,47.62Z" style="fill:none;stroke:#F9F9F9;stroke-linecap:round;stroke-linejoin:round;stroke-width:7.00px" fill="#F9F9F9"></path><path d="M119.72,78.2a30,30,0,0,1,5.82,18.38,30.11,30.11,0,1,1-25.18-30.29l3,.85A31.9,31.9,0,0,1,119.72,78.2Z" style="fill:none;stroke:#F9F9F9;stroke-linecap:round;stroke-linejoin:round;stroke-width:7.00px" fill="#F9F9F9"></path></svg>
        {% endif %}
    </button>
    <div class="options-container" style="display:none;">
      <div class="options-inner">
        <div class="search-area">
            <input type="text" class="search-bar my-options" placeholder="Search...">
        </div>
        <div class="button-container">
          <button class="copy-options" title="Copy All Changes Options">
              {% if not widget.django_admin %}
                {% icon name="copy" classname="icon-ace" title="Copy Options" %}
              {% else %}
                <svg class="icon-ace" id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFBFB"><rect x="4" y="8" width="12" height="12" rx="2" style="fill:none;stroke:#FFFBFB;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.40px" fill="#FFFBFB"></rect><path d="M16,16h2a2,2,0,0,0,2-2V6a2,2,0,0,0-2-2H10A2,2,0,0,0,8,6V8" style="fill:none;stroke:#FFFBFB;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.40px" fill="#FFFBFB"></path></svg>
              {% endif %}
          </button>
          <button class="undo-options" title="Undo">
              {% if not widget.django_admin %}
                {% icon name="history" classname="icon-ace" title="Undo Options" %}
              {% else %}
                  <svg class="icon-ace" id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3,19H15.5A5.5,5.5,0,0,0,21,13.5h0A5.5,5.5,0,0,0,15.5,8H8" style="fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.40px" fill="#FFFFFF"></path><polyline points="11 11 8 8 11 5" style="fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.40px"></polyline></svg>
              {% endif %}
          </button>
          <span class="changes-copy" style="display:none;"></span>
        </div>
        <div class="line-category"></div>
        <ul style="margin-left: 0; padding-left: 0;">
          {# Options List Here #}
          {% generate_options_lists widget.options %}
        </ul>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% if widget.django_admin %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new CustomCodeEditor(document.querySelector('div.editor-{{ widget.attrs.id }}'));
    })
</script>
{% endif %}