{% load i18n %}
{% spaceless %}
<div id="openassessment-editor" class="editor-with-buttons editor-with-tabs">
    <div class="openassessment_editor_content_and_tabs">

        <div id="openassessment_editor_header">
            <h6 id="oa_editor_window_title" class="title modal_window_title" >{% trans "Component: Open Response Problem" %}</h6>
            <ul class="editor_modes action_list action_modes editor_tabs">
                <li class="view-button oa_editor_tab"><a href="#oa_settings_editor_wrapper">{% trans "Settings" %}</a></li>
                <li class="view-button oa_editor_tab"><a href="#oa_rubric_editor_wrapper">{% trans "Rubric" %}</a></li>
                <li class="view-button oa_editor_tab"><a href="#oa_prompt_editor_wrapper">{% trans "Prompt" %}</a></li>
            </ul>
        </div>

        <div id = "oa_prompt_editor_wrapper" class="oa_editor_content_wrapper">
            <textarea id="openassessment_prompt_editor">{{ prompt }}</textarea>
        </div>

        {% include "openassessmentblock/edit/oa_edit_rubric.html"  %}

        <div id="oa_settings_editor_wrapper" class="oa_editor_content_wrapper wrapper-comp-settings">

            <ul id="oa_basic_settings_editor" class="list-input settings-list">
                <li id="openassessment_title_editor_wrapper" class="field comp-setting-entry">
                    <div class="wrapper-comp-setting">
                        <label for="openassessment_title_editor" class="setting-label">{% trans "Display Name "%}</label>
                        <input type="text" id="openassessment_title_editor" class="input setting-input" value="{{ title }}">
                    </div>
                    <p class="setting-help">{% trans "This name appears when you hover over the unit in the course ribbon at the top of the page." %}</p>
                </li>
                <li class="openassessment_date_editor field comp-setting-entry">
                    <div class="wrapper-comp-setting">
                        <label for="openassessment_submission_start_editor" class="setting-label">{% trans "Response Submission Start Date"%} </label>
                        <input type="datetime-local" class="input setting-input" id="openassessment_submission_start_editor" value="{{ submission_start }}">
                    </div>
                    <p class="setting-help">{% trans "The date at which submissions will first be accepted." %}</p>
                </li>
                <li class="openassessment_date_editor field comp-setting-entry">
                    <div class="wrapper-comp-setting">
                        <label for="openassessment_submission_due_editor" class="setting-label">{% trans "Response Submission Due Date" %}</label>
                        <input type="datetime-local" class="input setting-input" id="openassessment_submission_due_editor" value="{{ submission_due }}">
                    </div>
                    <p class="setting-help">{% trans "The date at which submissions will stop being accepted." %}</p>
                </li>
                <li id="openassessment_sumbission_image_wrapper" class="field comp-setting-entry">
                    <div class="wrapper-comp-setting">
                        <label for="openassessment_submission_image_editor" class="setting-label">{% trans "Allow Image Submissions"%}</label>
                        <select id="openassessment_submission_image_editor" class="input setting-input" name="image submission">
                            <option value="0">{% trans "Disabled"%}</option>
                            <option value="1">{% trans "Enabled"%}</option>
                        </select>
                    </div>
                    <p class="setting-help">{% trans "If enabled, students will be able to submit an image along with their open response." %}</p>
                </li>
            </ul>

            <p class="openassessment_description" id="openassessment_step_select_description">
                {% trans "Select the steps that students must complete. All steps are optional, but every assignment must include at least one step." %}
            </p>

            {% include "openassessmentblock/edit/oa_edit_training.html"  %}

            {% include "openassessmentblock/edit/oa_edit_peer.html"  %}

            {% include "openassessmentblock/edit/oa_edit_self.html"  %}

            {% include "openassessmentblock/edit/oa_edit_ai.html"  %}

        </div>

    </div>

    <div class="openassessment_editor_buttons xblock-actions">
        <h3 class="sr">Actions</h3>
        <ul>
            <li class="action-item">
                <a href="#" class="button action-primary openassessment_save_button">{% trans "Save" %}</a>
            </li>

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

</div>
{% endspaceless %}