{% spaceless %}
{% load i18n %}
<div 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 is--showing ui-slidable__container {% if criterion.options %}has--options{% endif %} {{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"
        >
            <div class="question__title ui-slidable__control">
                <button class="ui-slidable" aria-expanded="true" id="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}" aria-controls="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}__content">
                    <span class="icon fa fa-caret-right" aria-hidden="true"></span>
                    <span id="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}" class="ui-slidable__control__copy question__title__copy">{{ criterion.prompt }}</span>
                    <span class="label--required sr">({% trans "Required" %})</span>
                </button>
            </div>

            <div class="ui-slidable__content" aria-labelledby="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}" id="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}__content">
                <div class="question__answers">
                    <div role="group" aria-labelledby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}">
                        {% for option in criterion.options %}
                        <div class="answer">
                            <div class="wrapper--input">
                                <input type="radio"
                                       data-criterion-name="{{ criterion.name }}"
                                       class="answer__value rubric_{{ criterion.order_num }}_{{ option.order_num }}"
                                       id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
                                       value="{{ option.name }}"
                                       name="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"
                                       aria-describedby="{{ rubric_type }}__assessment__rubric__meta--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"/>
                                <label for="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
                                       class="answer__label"
                                       >{{ option.label }}</label>
                            </div>
                            <div class="wrapper--metadata"
                                 id="{{ rubric_type }}__assessment__rubric__meta--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}">
                                <span class="answer__tip">{{ option.explanation }}</span>
                                <span class="answer__points">{{ option.points }} <span class="answer__points__label">{% trans "points" %}</span></span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    {% if criterion.feedback == 'optional' or criterion.feedback == 'required' %}
                    <div class="answer--feedback">
                        <div class="wrapper--input">
                            <label for="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback__{{ xblock_id }}" class="answer__label">{% trans "Comments" %}</label>
                            <textarea
                                class="answer__value"
                                id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback__{{ xblock_id }}"
                                value="{{ criterion.name }}"
                                data-criterion-name="{{ criterion.name }}"
                                aria-describedby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}"
                                maxlength="1000"
                                {% if criterion.feedback == 'required' %}required{% endif %}
                                >
                            </textarea>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </li>
        {% endfor %}
        <li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback">
            <label class="question__title" for="{{ rubric_type }}__assessment__rubric__question--feedback__value__{{ xblock_id }}">
                <span class="question__title__copy">{{ rubric_feedback_prompt }}</span>
            </label>

            <div class="wrapper--input">
                <textarea
                    class="assessment__rubric__question--feedback__value"
                    id="{{ rubric_type }}__assessment__rubric__question--feedback__value__{{ xblock_id }}"
                    placeholder="{{ rubric_feedback_default_text }}"
                    maxlength="1000"
                >
                </textarea>
            </div>
        </li>
    </ol>
</div>
{% endspaceless %}
