{% load i18n %}
{% spaceless %}
<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
    <div class="openassessment problem" id="openassessment">
        <div class="wrapper--grid">
            <h2 class="openassessment__title problem__header">{{ title }}</h2>

            <div class="wrapper-openassessment__message">
                {% block message %}
                <div id="openassessment__message" class="openassessment__message message">
                    <div class="message__content">
                        <p>{% trans "This assignment has several steps. In the first step, you'll provide a response to the question. The other steps appear below the Your Response field." %}</p>
                    </div>
                </div>
                {% endblock %}
            </div>

            <ol class="openassessment__steps" id="openassessment__steps">
                {% for assessment in rubric_assessments %}
                    <li id="{{ assessment.class_id }}" class="openassessment__steps__step is--loading">
                        <header class="step__header">
                            <h2 class="step__title">
                                <span class="step__counter"></span>
                                <span class="wrapper--copy">
                                    <span class="step__label">{% trans assessment.title %}</span>
                                </span>
                            </h2>


                            <span class="step__status">
                                <span class="step__status__label">{% trans "This step's status:" %}</span>
                                <span class="step__status__value">
                                  <i class="icon fa fa-spinner fa-spin" aria-hidden="true"></i>
                                  <span class="copy">{% trans "Loading" %}</span>
                                </span>
                            </span>
                        </header>
                    </li>
                {% endfor %}
            </ol>

            {% if show_staff_area %}
                <div class="openassessment__staff-area"></div>
            {% endif %}
        </div>
    </div>
</div>
{% endspaceless %}
