{% load tz %}
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% 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">
                    {% 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">
                    {% 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">
                {% blocktrans with graded=graded must_grade=must_grade%}In Progress (<span class="step__status__value--completed">{{ graded }}</span> of <span class="step__status__value--required">{{ must_grade }}</span>){% endblocktrans %}
            </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">
                                    {% blocktrans with review_num=review_num must_grade=must_grade%}
                                    <h3 class="peer-assessment__display__title">
                                        Assessment # <span class="peer-assessment__number--current">{{ review_num }}</span> of <span class="peer-assessment__number--required">{{ must_grade }}</span>
                                    </h3>
                                    {% endblocktrans %}
                                </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>
