{% load i18n %}
<div class="editor-with-buttons">
  <div class="wrapper-comp-settings is-active editor-with-buttons" id="settings-tab">
    <ul class="list-input settings-list">
      {% for field in fields %}
        <li class="field comp-setting-entry metadata_entry {% if field.is_set %}is-set{% endif %}"
            data-field-name="{{field.name}}"
            data-default="{% if field.type == 'boolean' %}{{ field.default|yesno:'1,0' }}{% else %}{{ field.default|default_if_none:"" }}{% endif %}"
            data-cast="{{field.type}}">
          <div class="wrapper-comp-setting{% if field.type == "set" %} metadata-list-enum {%endif%}">
            <label class="label setting-label" for="xb-field-edit-{{field.name}}">{{field.display_name}}</label>

            {% if field.type == "boolean" %}
              <select class="field-data-control"
                      id="xb-field-edit-{{field.name}}"
                      aria-describedby="{{field.name}}-help">
                <option value="1" {% if field.value %}selected{% endif %}>
                  True {% if field.default %}&nbsp;&nbsp;&nbsp;&nbsp;(Default){% endif %}
                </option>
                <option value="0" {% if not field.value %}selected{% endif %}>
                  False {% if not field.default %}&nbsp;&nbsp;&nbsp;&nbsp;(Default){% endif %}
                </option>
              </select>
            {% elif field.type == "string" %}
              <input type="text"
                     class="field-data-control"
                     id="xb-field-edit-{{field.name}}"
                     value="{{field.value|default_if_none:""}}"
                     aria-describedby="{{field.name}}-help">
            {% elif field.type == "integer" or field.type == "float" %}
              <input type="number"
                     class="field-data-control"
                     id="xb-field-edit-{{field.name}}"
                     {% if field.step %} step="{{field.step}}" {% elif field.type == "integer" %} step=1 {% endif %}
                     {% if field.max %} max="{{field.max}}" {% endif %}
                     {% if field.min %} min="{{field.min}}" {% endif %}
                     value="{{field.value|default_if_none:""}}"
                     aria-describedby="{{field.name}}-help">
            {% elif field.type == "text" or field.type == "html" %}
              <textarea class="field-data-control"
                        data-field-name="{{field.name}}"
                        id="xb-field-edit-{{field.name}}"
                        aria-describedby="{{field.name}}-help"
                        rows=10 cols=70>{{field.value}}</textarea>
            {% else %}
              Unsupported field type. This setting cannot be edited.
            {% endif %}

            {% if field.allow_reset %}
              <button class="action setting-clear {% if field.is_set %}active{%else%}inactive{% endif %}"
                      type="button"
                      name="setting-clear"
                      value="{% trans "Clear" %}"
                      data-tooltip="{% trans "Clear" %}">
                <i class="icon fa fa-undo"></i><span class="sr">{% trans "Clear Value" %}</span>
              </button>
            {% endif %}
          </div>
          {% if field.help %}
            <span id="{{field.name}}-help" class="tip setting-help"> {{ field.help }} </span>
          {% endif %}
        </li>
      {% endfor %}
      <li>
        <!-- WYSIWYG editor -->
        <div class="vectordraw_block vectordraw_edit_block">
          <h2 aria-describedby="wysiwyg-description">WYSIWYG Editor</h2>

          <p id="wysiwyg-description">
            {% blocktrans %}
            Instead of using the "Vectors" field above to define or modify
            the set of working vectors for this exercise, you can also use the board below.
            To add a vector, left-click the board where you want the vector to originate.
            Keep holding down the left mouse button and drag your mouse pointer across the board
            to achieve the desired length and angle for the vector.
            Alternatively, you can click "Create vector", which will add a new vector
            that starts at the center of the board and has a predefined length (3) and angle (90).

            To modify an existing vector, left-click it, hold down the left mouse button,
            and move your mouse pointer across the board.
            Alternatively, you can select an existing vector from the dropdown menu
            modify its tail position, length, and angle by changing the values
            in the corresponding input fields, and click "Update" to update its position on the board.

            To remove an existing vector, left-click it or select it from the dropdown menu,
            then click "Remove".

            Note that if you make changes using the board below, any changes you made via the "Vectors" field above
            will be overwritten when you save the settings for this exercise by clicking the "Save" button below.
            {% endblocktrans %}
          </p>

          <div id="vectordraw">
            <div class="menu" style="width: {{ self.width }}px;">
              <div class="controls">
                <button class="add-vector">{% trans "Create vector" %}</button>
              </div>
              <div class="vector-properties" aria-live="polite">
                <h3>{{ self.vector_properties_label }}</h3>
                <div class="vector-prop-list">
                  <div class="row">
                    <div class="vector-prop vector-prop-name">
                      <span id="vector-prop-name-label">
                        {% trans "name" %}:
                      </span>
                      <select class="element-list-edit" aria-labelledby="vector-prop-name-label">
                        <option value="-" selected="selected" disabled="disabled">-</option>
                        {% for vector in self.get_vectors %}
                          <option value="vector-{{ forloop.counter0 }}" data-vector-name="{{ vector.name }}">
                            {{ vector.name }}
                          </option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="vector-prop vector-prop-tail">
                      <span id="vector-prop-tail-label">
                        {% trans "tail position" %}:
                      </span>
                      <input type="text" value="-" aria-labelledby="vector-prop-tail-label">
                    </div>
                    <div class="vector-prop vector-prop-length">
                      <span id="vector-prop-length-label">
                        {% trans "length" %}:
                      </span>
                      <input type="text" value="-" aria-labelledby="vector-prop-length-label">
                    </div>
                  </div>
                  <div class="row">
                    <div class="vector-prop vector-prop-angle">
                      <span id="vector-prop-angle-label">
                        {% trans "angle" %}:
                      </span>
                      <input type="text" value="-" aria-labelledby="vector-prop-angle-label">
                    </div>
                    <div class="vector-prop vector-prop-slope">
                      <span id="vector-prop-slope-label">
                        {% trans "slope" %}:
                      </span>
                      <input type="text" value="-" aria-labelledby="vector-prop-slope-label" disabled="disabled">
                    </div>
                  </div>
                  <div class="row">
                    <div class="vector-prop vector-prop-update">
                      <button class="update">
                        <span class="update-label" aria-hidden="true">{% trans "Update" %}</span>
                        <span class="sr">{% trans "Update properties of selected element" %}</span>
                      </button>
                      <span class="update-error">{% trans "Invalid input." %}</span>
                    </div>
                    <div class="vector-prop vector-remove">
                      <button class="remove">
                        <span class="remove-label" aria-hidden="true">{% trans "Remove" %}</span>
                        <span class="sr">{% trans "Remove selected element" %}</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="jxgboard"
                 style="width: {{ self.width }}px; height: {{ self.height }}px;"
                 tabindex="0">
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <div class="xblock-actions">
    <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>