{% load tz %}
{% load i18n %}
{% block list_item %}
<li
    id="openassessment__peer-assessment"
    class="openassessment__steps__step step--peer-assessment ui-toggle-visibility {% if allow_latex %} allow--latex {%endif%}"
    data-submission-uuid="{{ peer_submission.uuid }}"
>
{% endblock %}
{% spaceless %}

    <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 "Assess Peers" %}</span>
                {% if peer_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=peer_start|utc|date:"N j, Y H:i e" time_until=peer_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
                </span>
                {% elif peer_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=peer_due|utc|date:"N j, Y H:i e" time_until=peer_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
                </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">
                {% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
                {% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
                    In Progress ({{ num_graded }} of {{ num_must_grade }})
                {% endblocktrans %}
                {% endwith %}
            </span>
          </span>
        </span>
        {% endblock %}
    </header>

    {% block body %}
    <div class="ui-toggle-visibility__content">
        <div class="wrapper--step__content">
            <div class="step__instruction">
                <p>{% trans "Read and assess the following response from one of your peers." %}</p>
            </div>

            <div class="step__content">
                <ul class="list--peer-assessments">
                    <li class="list--peer-assessments__item">
                        <article class="peer-assessment" id="peer-assessment--001">
                            <div class="peer-assessment__display">
                                <header class="peer-assessment__display__header">
                                    <h3 class="peer-assessment__display__title">
                                        {% with review_num_string=review_num|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
                                        {% blocktrans with review_number='<span class="peer-assessment__number--current">'|safe|add:review_num_string|add:'</span>'|safe num_must_grade='<span class="peer-assessment__number--required">'|safe|add:must_grade_string|add:'</span>'|safe %}
                                            Assessment # {{ review_number }} of {{ num_must_grade }}
                                        {% endblocktrans %}
                                        {% endwith %}
                                    </h3>
                                </header>

                                <div class="peer-assessment__display__response">
                                    {{ peer_submission.answer.text|linebreaks }}
                                </div>

                                {% if allow_file_upload and peer_file_url %}
                                <header class="peer-assessment__display__header">
                                    <h3 class="peer-assessment__display__title">
                                        {% trans "Associated Image" %}
                                    </h3>
                                </header>

                                <div class="peer-assessment__display__image">
                                    <img class="submission--image" alt="{% trans "The image associated with your peer's submission." %}" src="{{ peer_file_url }}"/>
                                </div>
                                {% endif %}
                            </div>

                            <form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
                                {% include "openassessmentblock/oa_rubric.html" %}
                            </form>
                        </article>
                    </li>
                </ul>
            </div>

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

                <ul class="list list--actions">
                    <li class="list--actions__item">
                        <button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">
                            <span class="copy">{{ submit_button_text }}</span>
                            <i class="ico icon-caret-right"></i>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% endblock %}
{% endspaceless %}
</li>
