{% 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">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">Your grade for this problem</a>
                    </li>
                </ol>
            </nav>

            {% block message %}
            <!-- if the problem is unstarted or response hasn't been submitted -->
            <div id="openassessment__message" class="openassessment__message message">
                <div class="message__content">
                    <p>This problem requires that you work through multiple parts. You can begin by reading the question below and <a data-behavior="ui-scroll" href="#openassessment__response">providing your response</a>.</p>
                </div>
            </div>
            {% endblock %}

            <div class="wrapper--openassessment__prompt">
                <article class="openassessment__prompt ui-toggle-visibility">

                    <h2 class="openassessment__prompt__title">This Problem's Prompt/Question</h2>

                    <div class="openassessment__prompt__copy ui-toggle-visibility__content">
                        <p>{{ question }}</p>
                    </div>
                </article>
            </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">This step's status:</span>
                                <span class="step__status__value">
                                    <span class="wrapper--anim">
                                        <span class="copy">Loading</span>
                                        <i class="ico icon-refresh icon-spin"></i>
                                    </span>
                                </span>
                            </span>
                        </header>
                    </li>
                {% endfor %}
            </ol>

            {% if is_course_staff %}
            <div>
                <h2>Course Staff Debug Information</h2>
                <p><b>Total number of submissions</b>: {{ num_submissions }}</p>
                <table border="1">
                    <tr>
                        <th>Step</th>
                        <th>Number of students</th>
                    </tr>
                    {% for item in status_counts %}
                    <tr>
                        <td>{{ item.status }}</td>
                        <td>{{ item.count }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endspaceless %}