{% 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 class="wrapper--staff-info wrapper--ui-staff">
            <div class="staff-info ui-staff ui-toggle-visibility">
                <h2 class="staff-info__title ui-staff__title ui-toggle-visibility__control">
                  <i class="ico icon-caret-right"></i>
                  <span class="staff-info__title__copy">Course Staff Information</span>
                </h2>

                <div class="staff-info__content ui-staff__content ui-toggle-visibility__content">

                    <div class="staff-info__summary ui-staff__content__section">
                        <dl class="submissions--total">
                            <dt class="label">Total number of submissions:</dt>
                            <dd class="value">{{ num_submissions }}</dd>
                        </dl>
                    </div>

                    <div class="staff-info__status ui-staff__content__section">
                        <table class="staff-info__status__table" summary="Where are your students currently in this problem">

                            <caption class="title">Student Progress/Step Status</caption>

                            <thead>
                                <tr>
                                    <th abbr="Step" scope="col">Problem Step</th>
                                    <th abbr="# of Students" scope="col">Number of Students Actively in Step</th>
                                </tr>
                            </thead>

                            <tbody>
                              {% for item in status_counts %}
                              <tr>
                                  <td class="label">{{ item.status }}</td>
                                  <td class="value">{{ item.count }}</td>
                              </tr>
                              {% endfor %}
                            </tbody>
                        </table>
                    </div>

                </div>
              </div>
          </div>
          {% endif %}
        </div>
    </div>
</div>
{% endspaceless %}