{% load i18n %}

<!-- TODO: Replace by default edit view once available in Studio -->
<div class="wrapper-comp-settings is-active editor-with-buttons" id="settings-tab">
  <ul class="list-input settings-list">
      <li class="field comp-setting-entry is-set">
          <div class="wrapper-comp-setting">
            <label class="label setting-label" for="edit_display_name">{% trans "Title" %}</label>
            <input class="input setting-input edit-display-name" id="edit_display_name" value="{{ self.display_name }}" type="text">
          </div>
          <span class="tip setting-help">{% trans "The title of the Image Explorer that is displayed to the user" %}</span>
      </li>
      {% if not self.hotspot_coordinates_centered %}
      <li class="field comp-setting-entry is-set">
          <div class="wrapper-comp-setting">
            <input type="checkbox" class="setting-input edit-hotspot-coordinates-centered" id="edit_hotspot_coordinates_centered">
            <label class="label setting-label label-block" for="edit_hotspot_coordinates_centered">{% trans "Hotspot coordinates centered" %}</label>
          </div>
          <span class="tip setting-help">{% trans "If set to true, hotspot coordinates interpreted to point to the center of the hotspot" %} <br /> {% trans "If set to false, assumed to point to the top left corner of the hotspot image" %}</span>
      </li>
      {% endif %}
      <li class="field comp-setting-entry is-set">
          <div class="wrapper-comp-setting">
            <label class="label setting-label" for="edit_data">{% trans "Definition" %}</label>
            <span class="tip setting-help">{% trans "The XML definition for the Image Explorer" %}</span>
            <div class='codemirror-editor-wrapper'>
              <textarea class="block-xml-editor edit-data">{{ self.data }}</textarea>
            </div>
          </div>
      </li>
  </ul>
  <div class="xblock-actions">
    <span class="xblock-editor-error-message"></span>
    <ul>
      <li class="action-item">
        <a href="#" class="button action-primary save-button">{% trans "Save" %}</a>
      </li>

      <li class="action-item">
        <a href="#" class="button cancel-button">{% trans "Cancel" %}</a>
      </li>
    </ul>
  </div>
</div>
