{% load i18n %}
{% load tz %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training ui-toggle-visibility">
{% 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">
                        {% 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">
                        {% 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 }}</span> (in {{ time_until }}){% 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>{% blocktrans %}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.{% endblocktrans %}</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>{% blocktrans %}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.{% endblocktrans %}</p>
                </div>
            </div>

            <div class="step__content">
                <article class="student-training__display" id="student-training">
                    <header class="student-training__display__header">
                        <h3 class="student-training__display__title">
                            {% blocktrans with training_num_current=training_num_current training_num_available=training_num_available %}Training Assessment #<span class="student-training__number--current">{{ training_num_current }}</span> of <span class="student-training__number--required">{{ training_num_available }}</span>{% endblocktrans %}
                        </h3>
                    </header>

                    <div class="student-training__display__response">
                        {{ training_essay|linebreaks }}
                    </div>
                </article>

                <form id="student-training--001__assessment" class="student-training__assessment" method="post">
                    <fieldset 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="assessment__rubric__question--{{ criterion.order_num }}"
                                >
                                    <h4 class="question__title ui-toggle-visibility__control">
                                        <i class="ico icon-caret-right"></i>
                                        <span 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>
                                        <ol class="question__answers">
                                            {% for option in criterion.options %}
                                                <li class="answer">
                                                    <div class="wrapper--input">
                                                        <input type="radio"
                                                               name="{{ criterion.name }}"
                                                               id="assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}"
                                                               class="answer__value"
                                                               value="{{ option.name }}" />
                                                        <label for="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>
                                                </li>
                                            {% endfor %}
                                        </ol>
                                    </div>
                                </li>
                                {% endif %}
                            {% endfor %}
                        </ol>
                    </fieldset>
                </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>
                            <i class="ico icon-caret-right"></i>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}
</li>
{% endspaceless %}
