{% load i18n %}

<div class="xblock--drag-and-drop--editor editor-with-buttons">
    {{ js_templates|safe }}

    <section class="drag-builder">
        <div class="tab feedback-tab">
            <p class="tab-content">
                {% trans "Note: do not edit the problem if students have already completed it. Delete the problem and create a new one." %}
            </p>

            <section class="tab-content">
                <form class="feedback-form">
                    <label class="h3" for="display-name">{% trans "Problem title" %}</label>
                    <input id="display-name" value="{{ self.display_name }}" />
                    <label title="{{ help_texts.show_title }}">
                      <input class="show-title" type="checkbox"
                        {% if self.show_title %}checked="checked"{% endif %}>
                      {% trans "Show title" %}
                      <span class="sr">{{ help_texts.show_title }}</span>
                    </label>

                    <label class="h3" for="weight">{% trans "Maximum score" %}</label>
                    <input id="weight" type="number" step="0.1" value="{{ self.weight }}" />

                    <label class="h3" for="problem-text">{% trans "Problem text" %}</label>
                    <textarea id="problem-text">{{ self.question_text }}</textarea>
                    <label title="{{ help_texts.show_question_header }}">
                      <input class="show-problem-header" type="checkbox"
                        {% if self.show_question_header %}checked="checked"{% endif %}>
                      {% trans 'Show "Problem" heading' %}
                      <span class="sr">{{ help_texts.show_question_header }}</span>
                    </label>

                    <label class="h3" for="intro-feedback">{% trans "Introductory Feedback" %}</label>
                    <textarea id="intro-feedback">{{ self.data.feedback.start }}</textarea>

                    <label class="h3" for="final-feedback">{% trans "Final Feedback" %}</label>
                    <textarea id="final-feedback">{{ self.data.feedback.finish }}</textarea>
                </form>
            </section>
        </div>

        <div class="tab zones-tab hidden">
            <header class="tab-header">
                <h3>{% trans "Zones" %}</h3>
            </header>
            <section class="tab-content">
                <form class="target-image-form">
                    <label class="h3" for="background-url">{% trans "Background URL" %}</label>
                    <input id="background-url"
                           type="text"
                           placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}">
                    <label class="h3" for="background-description">{% trans "Background description" %}</label>
                    <textarea id="background-description"
                              aria-describedby="background-description-description"></textarea>
                    <div id="background-description-description" class="target-image-form-help">
                        {% blocktrans %}
                            Please provide a description of the image for non-visual users.
                            The description should provide sufficient information to allow anyone
                            to solve the problem even without seeing the image.
                        {% endblocktrans %}
                    </div>
                    <button class="btn">{% trans "Change background" %}</button>
                </form>
            </section>
            <section class="tab-content">
                <form class="display-labels-form">
                    <h3>{% trans "Zone labels" %}</h3>
                    <label for="display-labels">{% trans "Display label names on the image" %}:</label>
                    <input name="display-labels" id="display-labels" type="checkbox" />
                </form>
                <form class="display-borders-form">
                    <h3>{% trans "Zone borders" %}</h3>
                    <label for="display-borders">{% trans "Display zone borders on the image" %}:</label>
                    <input name="display-borders" id="display-borders" type="checkbox" />
                </form>
            </section>
            <section class="tab-content">
                <div class="zone-editor">
                    <div class="controls">
                        <form class="zones-form"></form>
                        <a href="#" class="add-zone add-element"><div class="icon add"></div>{% trans "Add a zone" %}</a>
                    </div>
                    <div class="target">
                        <img class="target-img">
                        <div class="zones-preview">
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="tab items-tab hidden">
            <header class="tab-header">
                <h3>{% trans "Items" %}</h3>
            </header>
            <section class="tab-content">
                <form class="item-styles-form">
                    <label class="h3" for="item-background-color">{% trans "Background color" %}</label>
                    <input id="item-background-color"
                           placeholder="e.g. blue or #0000ff"
                           value="{{ self.item_background_color}}"
                           aria-describedby="item-background-color-description">
                    <div id="item-background-color-description" class="item-styles-form-help">
                      {{ help_texts.item_background_color }}
                    </div>
                    <label class="h3" for="item-text-color">{% trans "Text color" %}</label>
                    <input id="item-text-color"
                           placeholder="e.g. white or #ffffff"
                           value="{{ self.item_text_color}}"
                           aria-describedby="item-text-color-description">
                    <div id="item-text-color-description" class="item-styles-form-help">
                      {{ help_texts.item_text_color }}
                    </div>
                </form>
            </section>
            <section class="tab-content">
                <form class="items-form"></form>
            </section>
            <footer class="tab-footer">
                <a href="#" class="add-item add-element"><div class="icon add"></div>{% trans "Add an item" %}</a>
            </footer>
        </div>

    </section>

    <div class="xblock-actions">
      <span class="xblock-editor-error-message"></span>
      <ul>
        <li class="action-item">
          <a href="#" class="button action-primary continue-button">{% trans "Continue" %}</a>
        </li>

        <li class="action-item hidden">
          <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>