{% load i18n %}

<li id="openassessment__staff-assessment__{{ xblock_id }}" class="openassessment__steps__step step--staff-assessment ui-slidable__container {{ step_classes }}" tabindex="-1">
    <header class="step__header ui-slidable__control">
        <h4 class="step__title">
            <button class="ui-slidable" {{ button_active }}
                {% if message_title %}
                    id="oa_staff_grade_{{ xblock_id }}" aria-controls="oa_staff_grade_{{ xblock_id }}_content" aria-describedby="oa_step_status oa_step_deadline"
                {% endif %}
            >
                <span class="step__counter"></span>
                <span class="wrapper--copy">
                    <span class="step__label">{% trans "Staff Grade" %} </span>
                </span>
            </button>            
        </h4>
        <span class="step__status">
          <span id="oa_step_status" class="step__status__value">
              {% if icon_class %}
              <span class="icon fa {{ icon_class }}" aria-hidden="true"></span>
              {% endif %}
              <span class="copy">{{ status_value }}</span>
          </span>
        </span>
    </header>

    {% if message_title %}
    <div class="ui-slidable__content" aria-labelledby="oa_staff_grade_{{ xblock_id }}" id="oa_staff_grade_{{ xblock_id }}_content">
        <div class="wrapper--step__content">
            <div class="step__message message message--incomplete">
                <h5 class="message__title">{{ message_title }}</h5>

                <div class="message__content">
                  <p>{{ message_content }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

</li>
