{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--complete has--grade {% if allow_latex %}allow--latex{% endif %}">
    <header class="step__header ui-toggle-visibility__control">
        <h2 class="step__title">
            <span class="wrapper--copy">
                {% if score %}
                <span class="step__label">{% trans "Your Grade" %}: </span>
                <span class="grade__value">
                    <span class="grade__value__title">
                        {% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
                        {% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %}
                            {{ points_earned }} out of {{ points_possible }}
                        {% endblocktrans %}
                        {% endwith %}
                    </span>
                </span>
                {% else %}
                <span class="step__label">{% trans "Your Grade" %}</span>
                {% endif %}
            </span>
        </h2>
    </header>

    <div class="ui-toggle-visibility__content">
        <div class="wrapper--step__content">
            <div class="step__content">
                <article class="submission__answer__display step__content__section">
                    <h3 class="submission__answer__display__title">{% trans "Your Response" %}</h3>

                    <div class="submission__answer__display__content">
                        {{ student_submission.answer.text|linebreaks }}
                    </div>

                    {% if allow_file_upload and file_url %}
                    <h3 class="submission__answer__display__title">
                        {% trans "Your Image" %}
                    </h3>

                    <div class="submission__answer__display__image">
                        <img class="submission--image" alt="{% trans "The image associated with your submission." %}" src="{{ file_url }}"/>
                    </div>
                    {% endif %}
                </article>

                <article class="submission__peer-evaluations step__content__section">
                    <h3 class="submission__peer-evaluations__title">{% trans "Assessments of Your Response" %}</h3>

                    <ol class="list submission__peer-evaluations__questions">
                        {% for criterion in rubric_criteria %}
                        {% with criterion_num=forloop.counter %}
                        <li class="question question--{{ criterion_num }} ui-toggle-visibility">
                            <h4 class="question__title ui-toggle-visibility__control">
                                <i class="ico icon-caret-right"></i>
                                <span class="question__title__copy">{{ criterion.label }}</span>

                                <span class="question__score">
                                  <span class="label sr">{% trans "Overall Grade" %}</span>
                                  <span class="question__score__value">{{ criterion.median_score }}</span>
                                  <span class="label label--divider sr">out of</span>
                                  <span class="question__score__potential">
                                    {{ criterion.total_value }}
                                    <span class="unit">{% trans "Points" %}</span>
                                  </span>
                                </span>
                            </h4>

                            <ul class="question__answers ui-toggle-visibility__content has--hints">
                                {% for assessment in peer_assessments %}
                                    {% with peer_num=forloop.counter %}
                                        {% for part in assessment.parts %}
                                            {% if part.option.criterion.name == criterion.name %}
                                            <li class="answer peer-assessment--{{ peer_num }}"
                                                id="question--{{ criterion_num }}__answer-{{ peer_num }}">
                                                <h5 class="answer__title">
                                                    <span class="answer__source">
                                                      <span class="answer__source__label sr">{% trans "Assessor" %}: </span>
                                                      <span class="answer__source__value">
                                                      {% blocktrans with peer_num=peer_num%}Peer {{ peer_num }}{% endblocktrans %}
                                                      </span>
                                                    </span>
                                                    <span class="answer__value">
                                                        <span class="answer__value__label sr">{% trans "Peer's Assessment" %}: </span>
                                                        <span class="answer__value__value">
                                                            {{ part.option.label }}

                                                            <span class="ui-hint hint--top" data-hint="{{ part.option.explanation }}">
                                                              <i class="ico icon-info-sign"
                                                                 title="{% blocktrans with name=part.option.label %}More information about {{ name }}{% endblocktrans %}"></i>
                                                            </span>

                                                        </span>
                                                    </span>
                                                </h5>
                                                <span class="answer__score">
                                                    <span class="answer__score__label sr">{% trans "Grade Earned" %}: </span>
                                                    <span class="answer__score__value">{{ part.option.points }} {% trans "points" %}</span>
                                                </span>
                                            </li>
                                            {% endif %}
                                        {% endfor %}
                                    {% endwith %}
                                {% endfor %}

                                {% for part in self_assessment.parts %}
                                    {% if part.option.criterion.name == criterion.name %}
                                <li class="answer self-assessment"
                                    id="question--{{ criterion_num }}__answer--self">
                                    <h5 class="answer__title">
                                        <span class="answer__source">
                                          <span class="answer__source__value">{% trans "Your Self Assessment" %}</span>
                                        </span>
                                        <span class="answer__value">
                                            <span class="answer__value__label sr">{% trans "Your Assessment" %}: </span>
                                            <span class="answer__value__value">
                                                {{ part.option.label }}

                                                <span class="ui-hint hint--top" data-hint="{{ part.option.explanation }}">
                                                  <i class="ico icon-info-sign"
                                                     title="{% blocktrans with name=part.option.label %}More information about {{ name }}{% endblocktrans %}"></i>
                                                </span>
                                            </span>
                                        </span>
                                    </h5>
                                </li>
                                    {% endif %}
                                {% endfor %}

                                {% for part in example_based_assessment.parts %}
                                    {% if part.option.criterion.name == criterion.name %}
                                        <li class="answer example-based-assessment"
                                            id="question--{{ criterion_num }}__answer--example-based">
                                            <h5 class="answer__title">
                                        <span class="answer__source">
                                          <span class="answer__source__value">{% trans "Example-Based Assessment" %}</span>
                                        </span>
                                        <span class="answer__value">
                                            <span class="answer__value__label sr">{% trans "Example-Based Assessment" %}: </span>
                                            <span class="answer__value__value">
                                                {{ part.option.label }}

                                                <span class="ui-hint hint--top" data-hint="{{ part.option.explanation }}">
                                                  <i class="ico icon-info-sign"
                                                     title="{% blocktrans with name=part.option.label %}More information about {{ name }}{% endblocktrans %}"></i>
                                                </span>
                                            </span>
                                        </span>
                                            </h5>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if criterion.peer_feedback or criterion.self_feedback %}
                                <li class="answer--feedback ui-toggle-visibility {% if criterion.options %}is--collapsed{% endif %}">
                                    {% if criterion.options %}
                                    <h5 class="answer--feedback__title ui-toggle-visibility__control">
                                      <i class="ico icon-caret-right"></i>
                                      {% if criterion.self_feedback %}
                                        <span class="answer--feedback__title__copy">{% trans "Additional Comments" %} ({{ criterion.peer_feedback|length|add:'1' }})</span>
                                      {% else %}
                                        <span class="answer--feedback__title__copy">{% trans "Additional Comments" %} ({{ criterion.peer_feedback|length }})</span>
                                      {% endif %}
                                    </h5>
                                    {% endif %}

                                    <ul class="answer--feedback__content {% if criterion.options %}ui-toggle-visibility__content{% endif %}">
                                        {% for feedback in criterion.peer_feedback %}
                                        <li class="feedback feedback--{{ forloop.counter }}">
                                            <h6 class="feedback__source">
                                              {% trans "Peer" %} {{ forloop.counter }}
                                            </h6>

                                            <div class="feedback__value">
                                              {{ feedback }}
                                            </div>
                                        </li>
                                        {% endfor %}
                                        {% if criterion.self_feedback %}
                                        <li class="feedback feedback--{{ forloop.counter }}">
                                            <h6 class="feedback__source">
                                              {% trans "Your Assessment" %}
                                            </h6>

                                            <div class="feedback__value">
                                              {{ criterion.self_feedback }}
                                            </div>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </li>
                                {% endif %}

                            </ul>
                        </li>
                        {% endwith %}
                        {% endfor %}
                            {% if peer_assessments or self_assessment.feedback %}
                            <li class="question question--feedback ui-toggle-visibility">
                                <h4 class="question__title ui-toggle-visibility__control">
                                    <i class="ico icon-caret-right"></i>
                                    <span class="question__title__copy">{% trans "Additional comments on your response" %}</span>
                                </h4>

                                <ul class="question__answers ui-toggle-visibility__content">
                                    {% for assessment in peer_assessments %}
                                    {% with peer_num=forloop.counter %}
                                    {% if assessment.feedback %}
                                    <li class="answer peer-evaluation--{{ peer_num }}" id="question--feedback__answer-{{ peer_num }}">
                                        <h5 class="answer__title">
                                            <span class="answer__source">
                                              <span class="label sr">{% trans "Peer assessor" %}: </span>
                                              <span class="value">{% blocktrans with peer_num=peer_num %}Peer {{ peer_num }}{% endblocktrans %}</span>
                                            </span>
                                        </h5>

                                        <div class="answer__value">
                                            <h6 class="label sr">{% trans "Peer's assessment" %}: </h6>
                                            <div class="value">
                                                <p>{{ assessment.feedback }}</p>
                                            </div>
                                        </div>
                                    </li>
                                    {% endif %}
                                    {% endwith %}
                                    {% endfor %}
                                    {% if self_assessment.feedback %}
                                    <li class="answer self-evaluation--0" id="question--feedback__answer-0">
                                        <h5 class="answer__title">
                                            <span class="answer__source">
                                              <span class="label sr">{% trans "Self assessment" %}: </span>
                                              <span class="value">{% trans "Self assessment" %}</span>
                                            </span>
                                        </h5>

                                        <div class="answer__value">
                                            <h6 class="label sr">{% trans "Your assessment" %}: </h6>
                                            <div class="value">
                                                <p>{{ self_assessment.feedback }}</p>
                                            </div>
                                        </div>
                                    </li>
                                    {% endif %}
                                </ul>
                            </li>
                            {% endif %}
                    </ol>
                </article>

                {% if peer_assessments %}
                    <form id="submission__feedback" class="submission__feedback ui-toggle-visibility step__content__section is--collapsed" method="post">
                        <h3 class="submission__feedback__title ui-toggle-visibility__control">
                            <i class="ico icon-caret-right"></i>
                            <span class="submission__feedback__title__copy">{% trans "Provide Feedback on Peer Assessments" %}</span>
                        </h3>

                        <div class="ui-toggle-visibility__content">

                            <div class="submission__feedback__content {{ has_submitted_feedback|yesno:"is--submitted," }}">
                                <span class="transition__status is--hidden" aria-hidden="true">
                                    <span class="wrapper--anim">
                                        <i class="ico icon-refresh icon-spin"></i>
                                        <span class="copy">{% trans "Submitting Feedback" %}</span>
                                    </span>
                                </span>

                                <div class="message message--complete {{ has_submitted_feedback|yesno:",is--hidden" }}"
                                    {{ has_submitted_feedback|yesno:'aria-hidden=false,aria-hidden=true' }}>
                                    <h3 class="message__title">{% trans "Your Feedback Has Been Submitted" %}</h3>
                                    <div class="message__content">
                                        <p>{% trans "Your feedback has been submitted. Course staff will be able to see this feedback when they review course records." %}</p>
                                    </div>
                                </div>

                                <div class="submission__feedback__instructions {{ has_submitted_feedback|yesno:"is--hidden," }}"
                                    {{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
                                    <p>{% trans "Course staff will be able to see any feedback that you provide here when they review course records." %}</p>
                                </div>

                                <ol class="list list--fields submission__feedback__fields {{ has_submitted_feedback|yesno:"is--hidden," }}"
                                    {{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
                                    <li class="field field-group field--radio feedback__overall" id="feedback__overall">
                                        <h4 class="field-group__label">{% trans "Select the statements below that best reflect your experience with peer assessments" %}:</h4>
                                        <ol class="list--options">
                                            <li class="option option--useful">
                                                <input type="checkbox"
                                                    name="feedback__overall__value"
                                                    id="feedback__overall__value--useful"
                                                    class="option__input feedback__overall__value"
                                                    value="These assessments were useful." />
                                                <label class="option__label" for="feedback__overall__value--useful">{% trans "These assessments were useful." %}</label>
                                            </li>
                                            <li class="option option--notuseful">
                                                <input type="checkbox"
                                                    name="feedback__overall__value"
                                                    id="feedback__overall__value--notuseful"
                                                    class="option__input feedback__overall__value"
                                                    value="These assessments were not useful." />
                                                <label class="option__label" for="feedback__overall__value--notuseful">{% trans "These assessments were not useful." %}</label>
                                            </li>
                                            <li class="option option--disagree">
                                                <input type="checkbox"
                                                    name="feedback__overall__value"
                                                    id="feedback__overall__value--disagree"
                                                    class="option__input feedback__overall__value"
                                                    value="I disagree with one or more of the peer assessments of my response." />
                                                <label class="option__label" for="feedback__overall__value--disagree">{% trans "I disagree with one or more of the peer assessments of my response." %}</label>
                                            </li>
                                            <li class="option option--inappropriate">
                                                <input type="checkbox"
                                                    name="feedback__overall__value"
                                                    id="feedback__overall__value--inappropriate"
                                                    class="option__input feedback__overall__value"
                                                    value="Some comments I received were inappropriate." />
                                                <label class="option__label" for="feedback__overall__value--inappropriate">{% trans "Some comments I received were inappropriate." %}</label>
                                            </li>
                                        </ol>
                                    </li>
                                    <li class="field field--textarea feedback__remarks" id="feedback__remarks">
                                        <label for="feedback__remarks__value">{% trans "Please provide any feedback on the grade or comments that you received from your peers." %}</label>
                                        <textarea
                                            id="feedback__remarks__value"
                                            placeholder="{% trans "I feel the feedback I received was..." %}"
                                            maxlength="100000"
                                        >
                                            {{ feedback_text }}
                                        </textarea>
                                    </li>
                                </ol>

                                <div class="submission__feedback__actions {{ has_submitted_feedback|yesno:"is--hidden," }}"
                                    {{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
                                    <div class="message message--inline message--error message--error-server">
                                        <h3 class="message__title">{% trans "We could not submit your feedback" %}</h3>
                                        <div class="message__content"></div>
                                    </div>

                                    <ul class="list list--actions submission__feedback__actions">
                                        <li class="list--actions__item">
                                            <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">{% trans "Submit Feedback on Peer Assessments" %}</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
</li>
{% endspaceless %}
