{# JSON EDITOR #}
{% include('field-builder-modal.html') %}

<section id='json-editor' aria-label='json editor'>
  {# id for icon is used when focusing after loading from file #}
  <h3 data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='false' aria-controls='jsonEditorDiv'><i id='jsonEditorIcon' class='fas fa-caret-right fa-fw mr-2'></i>{{ 'JSON Editor'|trans }}</h3>

  <div id='jsonEditorDiv' class='m-2' hidden data-save-hidden='jsonEditorDiv'>
    <hr>
    {# JSON EDITOR TOOLBAR #}
    <div class='d-flex align-items-center'>
      {# ADD FIELD #}
      <button title='{{ 'Add field'|trans }}' aria-label='{{ 'Add field'|trans }}' type='button' data-action='toggle-modal' data-target='fieldBuilderModal' id='jsonEditorAddFieldButton' class='btn hl-hover-gray p-2 main-action-button lh-normal border-0'>
        <i class='fas fa-plus fa-fw'></i>
      </button>

      <div class='vertical-separator'></div>

      {# IMPORT FROM FILE #}
      <button title='{{ 'Import from file'|trans }}' aria-label='{{ 'Import from file'|trans }}' type='button' data-action='json-import-file' class='btn hl-hover-gray p-2 mr-2 lh-normal border-0'>
        <i class='fas fa-upload fa-fw'></i>
      </button>

      {# SAVE TO FILE #}
      <button title='{{ 'Save as…'|trans }}' aria-label='{{ 'Save as…'|trans }}' type='button' data-action='json-saveas-file' class='btn hl-hover-gray p-2 lh-normal border-0'>
        <i class='fas fa-download fa-fw'></i>
      </button>

      <div class='vertical-separator'></div>

      {# SAVE AS ATTACHMENT #}
      <button title='{{ 'Save as attachment'|trans }}' aria-label='{{ 'Save as attachment'|trans }}' type='button' data-action='json-save-file' class='btn hl-hover-gray p-2 mr-2 lh-normal border-0'>
        <i class='fas fa-paperclip fa-fw'></i>
      </button>

      {# SAVE #}
      <button title='{{ 'Save'|trans }}' aria-label='{{ 'Save'|trans }}' type='button' data-action='json-save' class='btn hl-hover-gray p-2 lh-normal border-0 mr-2'>
        <i class='fas fa-save fa-fw'></i>
      </button>

      <span hidden id='jsonUnsavedChangesWarningDiv'>{{ 'You have unsaved changes'|trans }}</span>

      {# CLEAR #}
      <button title='{{ 'Clear'|trans }}' aria-label='{{ 'Clear'|trans }}' type='button' data-action='json-clear' class='btn hl-hover-gray p-2 lh-normal border-0 mr-2 ml-auto'>
        <i class='fas fa-trash-alt fa-fw'></i>
      </button>
    </div>

    <div hidden id='jsonImportFileDiv'>
      <input type='file' class='form-control col-md-4 form-inline' name='file' accept='.json' id='jsonImportFileInput' />
      <button type='submit' data-action='json-upload-file' class='btn btn-primary'>{{ 'Import'|trans }}</button>
    </div>

    <hr>

    <button class='btn lh-normal border-0 px-0' type='button' data-action='toggle-next' aria-expanded='false' title='{{ 'Information'|trans }}' aria-label='{{ 'Information'|trans }}'><i class='fas fa-fw fa-info-circle'></i></button><span hidden><a target='_blank' class='external-link' rel='noopener' href='https://doc.elabftw.net/metadata.html'>{{ 'See documentation about extra fields.'|trans }}</a></span>
    <h6 id='jsonEditorTitle'></h6>
    {% if App.Config.configArr.debug -%}
      {# set no-unused-disable and text-content because removing or leaving text-content brings up error #}
      <!-- [html-validate-disable-block no-deprecated-attr, text-content, no-unused-disable: suppress errors from jsonEditor] -->
    {%- endif %}
    <div id='jsonEditorContainer' data-preload-json='1'></div>
  </div>
</section>