{% load i18n %}
{% spaceless %}
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--unfinished is--initially--collapsed  ui-slidable__container" tabindex="-1">
    <header class="step__header ui-slidable__control">
        <span>
            <button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content" aria-labeledby="oa_step_title_grade">
                <span class="icon fa fa-caret-right" aria-hidden="false"/>
            </button>
        </span>

        <span>
            <h4 class="step__title">
                <span class="wrapper--copy">
                    <span id="oa_step_title_grade" class="step__label">{% trans "Your Grade" %}: </span>
                    <span class="grade__value">
                        <span class="grade__value__title">{% trans "Not Completed" %}</span>
                    </span>
                </span>
            </h4>
        </span>
    </header>

    <div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
        <div class="wrapper--step__content">
            <div class="step__content">
                {% if score_explanation %}
                <div class="step__message message message--waiting">
                    <h5 class="message__title">{% trans "Status" %}</h5>
                    <div class="message__content">{{ score_explanation }}</div>
                </div>
                {% endif %}
                <div class="grade__value__description">
                    <p>{% trans "You have not completed all the steps of this problem." %}</p>
                </div>
            </div>
        </div>
    </div>
</li>
{% endspaceless %}
