{% load i18n %}
<h3>{% trans "Student Answers Dashboard" %}</h3>

<p>{% trans "You can export all student answers to multiple-choice questions and long-form answers to a CSV file here." %}</p>

<div class="data-export-options">
  <div class="data-export-field-container">
    <div class="data-export-field">
      <label>
        <span>{% trans "Problem types:" %}</span>
        <select multiple name="block_types">
          {% for label, value in block_choices.items %}
          <option value="{{value}}">{{label}}</option>
          {% endfor %}
        </select>
      </label>
    </div>
    <div class="data-export-helptext">
      {% trans "Select which types of problem to include (selecting none will grab all types)" %}
    </div>
  </div>
  <div class="data-export-field-container">
    <div class="data-export-field">
      <label>
        <span>{% trans "Root block ID:" %}</span>
        <input type="text" name="root_block_id" />
      </label>
    </div>
    <div class="data-export-helptext">
      {% trans "Input the ID of a chapter, section, or unit if you wish to only get results under it. Otherwise, it will grab all results for the course." %}
    </div>
  </div>
  <div class="data-export-field-container">
    <div class="data-export-field">
      <label>
        <span>{% trans "Username:" %}</span>
        <input type="text" name="username" />
      </label>
    </div>
    <div class="data-export-helptext">
      {% trans "Input the username of a student if you wish to query for a specific one. Otherwise, it will grab all results for all students." %}
    </div>
  </div>
</div>
<div class="data-export-actions">
  <button class="data-export-start">{% trans "Start a new export" %}</button>
</div>

<div class="data-export-results">
  <h3>{% trans "Results" %}</h3>
  <table>
    <thead>
      <tr>
        <td>{% trans "Section" %}</td>
        <td>{% trans "Subsection" %}</td>
        <td>{% trans "Unit" %}</td>
        <td>{% trans "Type" %}</td>
        <td>{% trans "Question" %}</td>
        <td>{% trans "Answer" %}</td>
        <td>{% trans "Username" %}</td>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<div class="data-export-status"></div>

<div class="data-export-actions">
  <button class="data-export-download">{% trans "Download result" %}</button>
  <button class="data-export-cancel">{% trans "Cancel current export" %}</button>
  <button class="data-export-delete">{% trans "Delete result" %}</button>
</div>
