{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% load i18n %}

{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete">
{% endblock %}

{% block title %}
<span class="step__status">
  <span class="step__status__label">{% trans "This step's status" %}:</span>
  <span class="step__status__value">
    <i class="ico icon-ok"></i>
    <span class="copy">
      {% blocktrans with num_graded='<span class="step__status__value--completed">'|add:graded|add:'</span>'|safe %}
        Complete ({{ num_graded }})
      {% endblocktrans %}
    </span>
  </span>
</span>
{% endblock %}

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

        <div class="step__message message message--complete">
            <h3 class="message__title">{% trans "Peer Assessments Complete" %}</h3>
            <div class="message__content">{% trans "You have successfully completed all of the required peer assessments for this assignment. You may assess additional peer responses if you want to. Completing additional assessments will not affect your final grade." %}</div>
        </div>

        <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">{% trans "Assessment #" %}
                                    <span class="peer-assessment__number--current">{{ review_num }}</span> of
                                    <span class="peer-assessment__number--required">{{ must_grade }}</span>
                                </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">
                            <fieldset class="assessment__fields">
                                <ol class="list list--fields assessment__rubric">

                                    {% for criterion in rubric_criteria %}
                                    <li
                                        class="field field--radio is--required assessment__rubric__question ui-toggle-visibility {% if criterion.options %}has--options{% endif %}"
                                        id="assessment__rubric__question--{{ criterion.order_num }}"
                                    >
                                        <h4 class="question__title ui-toggle-visibility__control">
                                            <i class="ico icon-caret-right"></i>
                                            <span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
                                            <span class="label--required sr">* ({% trans "Required" %})</span>
                                        </h4>

                                        <div class="ui-toggle-visibility__content">
                                            <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.name }}</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 %}

                                                {% if criterion.feedback == 'optional' or criterion.feedback == 'required' %}
                                                <li class="answer--feedback">
                                                    <div class="wrapper--input">
                                                        <label for="assessment__rubric__question--{{ criterion.order_num }}__feedback" class="answer__label">{% trans "Comments" %}</label>
                                                        <textarea
                                                            id="assessment__rubric__question--{{ criterion.order_num }}__feedback"
                                                            class="answer__value"
                                                            value="{{ criterion.name }}"
                                                            name="{{ criterion.name }}"
                                                            maxlength="300"
                                                            {% if criterion.feedback == 'required' %}required{% endif %}
                                                            >
                                                        </textarea>
                                                    </div>
                                                </li>
                                                {% endif %}
                                        </ol>
                                        </div>
                                    </li>
                                    {% endfor %}

                                    <li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback">
                                        <label class="question__title" for="assessment__rubric__question--feedback__value">
                                            <span class="question__title__copy">{{ rubric_feedback_prompt }}</span>
                                        </label>
                                        <div class="wrapper--input">
                                                <textarea
                                                    id="assessment__rubric__question--feedback__value"
                                                    placeholder="{% trans "I noticed that this response..." %}"
                                                    maxlength="500"
                                                >
                                                </textarea>
                                        </div>
                                    </li>
                                </ol>
                            </fieldset>
                        </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>

            <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 %}
