{%  extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% load i18n %}

{% block list_item %}
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--showing is--incomplete ui-slidable__container" tabindex="-1">
{% endblock %}

{% block button %}
    <button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content" aria-labeledby="oa_step_title_peer">
        <span class="icon fa fa-caret-down" aria-hidden="false"/>
    </button>
{% endblock %}

{% block title %}
<span class="step__status">
  <span id="oa_step_status_peer" class="step__status__value">
    <span class="copy">
    <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
        {% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
        {% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
            Incomplete ({{ num_graded }} of {{ num_must_grade }})
        {% endblocktrans %}
        {% endwith %}
    </span>
  </span>
</span>
{% endblock %}

{% block body %}
<div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
    <div class="wrapper--step__content">
        <div class="step__message message message--incomplete">
            <h5 class="message__title">{% trans "Status" %}</h5>
            <div class="message__content">
              <p>{% trans "The due date for this step has passed. This step is now closed. You can no longer complete peer assessments or continue with this assignment, and you will receive a grade of Incomplete." %}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
