{% load i18n %}
{% load tz %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}">
{% endblock %}

<header class="step__header ui-toggle-visibility__control">
    <h2 class="step__title">
        <span class="step__counter"></span>
            <span class="wrapper--copy">
                <span class="step__label">{% trans "Learn to Assess Responses" %}</span>
                {% if training_start %}
                    <span class="step__deadline">
                        {# Translators: This string displays a date to the user, then tells them the time until that date.  Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
                        {% blocktrans with start_date=training_start|utc|date:"N j, Y H:i e" time_until=training_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
                    </span>
                {% elif training_due %}
                    <span class="step__deadline">
                        {# Translators: This string displays a date to the user, then tells them the time until that date.  Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
                        {% blocktrans with due_date=training_due|utc|date:"N j, Y H:i e" time_until=training_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
                    </span>
                </span>
                {% endif %}
            </span>
    </h2>

    {% block title %}
        <span class="step__status">
          <span class="step__status__label">{% trans "This step's status" %}:</span>
          <span class="step__status__value">
              <span class="copy">{% trans "In Progress" %}
              (<span class="step__status__value--completed">{{ training_num_completed }}</span> of
                <span class="step__status__value--required">{{ training_num_available }}</span>)
              </span>
          </span>
        </span>
    {% endblock %}
</header>

{% block body %}
    <div class="ui-toggle-visibility__content">
        <div class="wrapper--step__content">

            <div id="openassessment__student-training--instructions" class="step__message message message--correct">
                <h3 class="message__title">{% trans "Learning to Assess Responses" %}</h3>

                <div class="message__content">
                    <p>{% trans "Before you begin to assess your peers' responses, you'll learn how to complete peer assessments by reviewing responses that instructors have already assessed. If you select the same options for the response that the instructor selected, you'll move to the next step. If you don't select the same options, you'll review the response and try again." %}</p>
                </div>
            </div>

            <div id="openassessment__student-training--incorrect" class="step__message message message--incorrect is--hidden">
                <h3 class="message__title">{% trans "Learning to Assess Responses" %}</h3>

                <div class="message__content">
                    <p>{% trans "Your assessment differs from the instructor's assessment of this response. Review the response and consider why the instructor may have assessed it differently. Then, try the assessment again." %}</p>
                </div>
            </div>

            <div class="step__content">
                <article class="student-training__display" id="student-training">
                    <header class="student-training__display__header">
                        {% with training_num_current=training_num_current training_num_available=training_num_available %}
                        <h3 class="student-training__display__title">
                            {% with training_num_current_string=training_num_current|stringformat:"s" training_num_available_string=training_num_available|stringformat:"s" %}
                            {% blocktrans with current_progress_num='<span class="student-training__number--current">'|safe|add:training_num_current_string|add:'</span>'|safe num_to_complete='<span class="student-training__number--required">'|safe|add:training_num_available_string|add:'</span>'|safe %}
                                Training Assessment # {{ current_progress_num }} of {{ num_to_complete }}
                            {% endblocktrans %}
                            {% endwith %}
                        </h3>
                        {% endwith %}
                    </header>

                    {% trans "The response to the question above:" as translated_label %}
                    {% include "openassessmentblock/oa_submission_answer.html" with answer=training_essay.answer answer_text_label=translated_label %}

                </article>

                <form id="student-training--001__assessment" class="student-training__assessment" method="post">
                    <div class="assessment__fields">
                        <ol class="list list--fields assessment__rubric">
                            {% for criterion in training_rubric.criteria %}
                                {% if criterion.options %}
                                <li
                                    class="field field--radio is--required assessment__rubric__question ui-toggle-visibility has--options"
                                    id="training__assessment__rubric__question--{{ criterion.order_num }}"
                                >
                                    <h4 class="question__title ui-toggle-visibility__control">
                                        <i class="icon fa fa-caret-right" aria-hidden="true"></i>
                                        <span id="training__assessment__rubric__prompt--{{ criterion.order_num }}" class="question__title__copy">{{ criterion.prompt }}</span>
                                        <span class="label--required sr">* ({% trans "Required" %})</span>
                                    </h4>
                                    <div class="ui-toggle-visibility__content">
                                        <div class="step__message message message--correct ui-toggle-visibility is--hidden">
                                            <h3 class="message__title">{% trans "Selected Options Agree" %}</h3>

                                            <div class="message__content">
                                                <p>{% trans "The option you selected is the option that the instructor selected." %}</p>
                                            </div>
                                        </div>
                                        <div class="step__message message message--incorrect ui-toggle-visibility is--hidden">
                                            <h3 class="message__title">{% trans "Selected Options Differ" %}</h3>

                                            <div class="message__content">
                                                <p>{% trans "The option you selected is not the option that the instructor selected." %}</p>
                                            </div>
                                        </div>
                                        <div class="question__answers">
                                            <div role="group" aria-labelledby="training__assessment__rubric__prompt--{{ criterion.order_num }}">
                                            {% for option in criterion.options %}
                                                <div class="answer">
                                                    <div class="wrapper--input">
                                                        <input type="radio"
                                                               data-criterion-name="{{ criterion.name }}"
                                                               id="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}"
                                                               class="answer__value"
                                                               value="{{ option.name }}"
                                                               name="training__assessment__rubric__question--{{ criterion.order_num }}"/>
                                                        <label for="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}"
                                                               class="answer__label">{{ option.label }}</label>
                                                    </div>
                                                    <div class="wrapper--metadata">
                                                        <span class="answer__tip">{{ option.explanation }}</span>
                                                        <span class="answer__points">{{option.points}} <span class="answer__points__label">{% trans "points" %}</span></span>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                {% endif %}
                            {% endfor %}
                        </ol>
                    </div>
                </form>
            </div>

            <div class="step__actions">
                <div class="message message--inline message--error message--error-server">
                    <h3 class="message__title">{% trans "We could not check your assessment" %}</h3>
                    <div class="message__content"></div>
                </div>

                <ul class="list list--actions">
                    <li class="list--actions__item">
                        <button type="submit" id="student-training--001__assessment__submit" class="action action--submit is--disabled">
                            <span class="copy">{% trans "Compare your selections with the instructor's selections" %}</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}
</li>
{% endspaceless %}
