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

                        {% trans "Your response to the question above:" as translated_label %}
                        {% include "openassessmentblock/oa_submission_answer.html" with answer=student_submission.answer answer_text_label=translated_label %}

                        {% trans "Your Upload" as translated_header %}
                        {% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=file_url header=translated_header class_prefix="submission__answer" %}
                    </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 grade_details.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="icon fa fa-caret-right" aria-hidden="true"></i>
                                            <span class="question__title__copy">{{ criterion.label }}</span>

                                            {% if criterion.total_value > 0 %}
                                                <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>
                                            {% endif %}
                                        </h4>

                                        {% if criterion.options %}
                                            <ul class="question__answers ui-toggle-visibility__content has--hints">
                                                {% for assessment in criterion.assessments %}
                                                    {% include "openassessmentblock/grade/oa_assessment_title.html" with assessment=assessment %}
                                                {% endfor %}
                                            </ul>
                                        {% endif %}

                                        {% if criterion.has_feedback %}
                                            <ul class="question__answers ui-toggle-visibility__content has--hints">
                                                {% for assessment in criterion.assessments %}
                                                    {% include "openassessmentblock/grade/oa_assessment_feedback.html" with title=assessment.feedback_title assessment=assessment %}
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    </li>
                                {% endwith %}
                            {% endfor %}
                            {% if grade_details.additional_feedback %}
                                <li class="question question--feedback ui-toggle-visibility">
                                    <h4 class="question__title ui-toggle-visibility__control">
                                        <i class="icon fa fa-caret-right" aria-hidden="true"></i>
                                        <span class="question__title__copy">{% trans "Additional comments on your response" %}</span>
                                    </h4>

                                    <ul class="question__answers ui-toggle-visibility__content">
                                        {% for feedback in grade_details.additional_feedback %}
                                            {% include "openassessmentblock/grade/oa_assessment_feedback.html" with title=feedback.title assessment=feedback %}
                                        {% endfor %}
                                    </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="icon fa fa-caret-right" aria-hidden="true"></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="icon fa fa-spinner fa-spin" aria-hidden="true"></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">
                                            <h4 id="feedback__overall__prompt" 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."
                                                           aria-labelledby="feedback__overall__prompt"/>
                                                    <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."
                                                           aria-labelledby="feedback__overall__prompt"/>
                                                    <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."
                                                           aria-labelledby="feedback__overall__prompt"/>
                                                    <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."
                                                           aria-labelledby="feedback__overall__prompt"/>
                                                    <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 "Provide 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" 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 %}
