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

            <nav class="nav--contents">
                <h2 class="title">{% trans "Skip to a specific step" %}</h2>

                <ol class="list list--nav">
                    {%  for assessment in rubric_assessments %}
                    <li class="list--nav__item">
                        <a class="action" href="#openassessment__{{ assessment.type }}">{{ assessment.navigation_text }}</a>
                    </li>
                    {% endfor %}
                    <li class="list--nav__item">
                        <a class="action" href="#openassessment__grade">{% trans "Your grade for this problem" %}</a>
                    </li>
                </ol>
            </nav>

            <div class="wrapper-openassessment__message">
                {% block message %}
                <div id="openassessment__message" class="openassessment__message message">
                    <h3 class="message__title">Instructions</h3>
                    <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>

            <div class="wrapper--openassessment__prompt">
                {% if question %}
                <article class="openassessment__prompt ui-toggle-visibility">
                    <h2 class="openassessment__prompt__title">{% trans "The prompt for this assignment" %}</h2>

                    <div class="openassessment__prompt__copy ui-toggle-visibility__content">
                        {{ question|linebreaks }}
                    </div>
                </article>
                {% endif %}
            </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">{{ 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="ico icon-refresh icon-spin"></i>
                                  <span class="copy">{% trans "Loading" %}</span>
                                </span>
                            </span>
                        </header>
                    </li>
                {% endfor %}
            </ol>

            {% if show_staff_debug_info %}
                <div id="openassessment__staff-info"></div>
            {% endif %}
        </div>
    </div>
</div>
{% endspaceless %}
