{%- import "apostrophe-schemas:macros.html" as schemas -%}

{# A macro for our code editor control's content #}
{% macro codeEditor(field) %}
<div class="flex">
  <div class="editor-container">
    <div class="dropdown">
      <style>
          .dropdown:after{
            color: black;
          }
      </style>
      <button class="button-dropdown result"></button>
      <div class="dropdown-content">
        <input type="text" placeholder="Search.." class="my-input">
      </div>
    </div>
    <div class="options">
      <button class="button-options" title="Adjust Options"></button>
      <div class="options-container">
        <div class="options-inner">
          <div class="search-area">
            <input type="text" placeholder="Search.." class="my-options">
            <div class="press-more-options">
              <div class="more-options">
                <button class="save-options"> Save</button>
                <button class="delete-options"> Reset</button>
              </div>
            </div>
          </div>
          <button class="copy-options" title="Copy All Changes Options"></button>
          <button class="undo-options" title="Undo"></button>
          <div class="line-category"></div>
          {# This is where all lists of options appear here #}
        </div>
      </div>
    </div>
    <div class="editor" data-editor>
      <!-- This is where code begins -->
    </div>
  </div>
</div>
{% endmacro %}

{# Wrap our content in a standard fieldset #}
{{ schemas.fieldset(data, codeEditor) }}