{% load i18n %}
{% load tz %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__self-assessment__{{ xblock_id }}"
    class="openassessment__steps__step step--self-assessment is--showing is--in-progress ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
    tabindex="-1">
{% endblock %}

    <header class="step__header ui-slidable__control">
       <h2 class="step__title">
            {% block button %}
            <button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content">
            {% endblock %}
                <span class="step__counter"></span>
                <span class="wrapper--copy">
                    <span class="step__label">{% trans "Assess Your Response" %}</span>
                    {% if self_start %}
                    <span class="step__deadline">
                        {# Translators: This string displays a date to the user, then tells them the time until that date.  Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
                        {% blocktrans with start_date=self_start|timezone:time_zone|date:"N j, Y H:i e" time_until=self_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
                    </span>
                    {% elif self_due %}
                    <span class="step__deadline">
                        {# Translators: This string displays a date to the user, then tells them the time until that date.  Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
                        {% blocktrans with due_date=self_due|timezone:time_zone|date:"N j, Y H:i e" time_until=self_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
                    </span>
                    {% endif %}
                </span>
            </button>

            {% block title %}
            <span class="step__status">
              <span class="step__status__label">{% trans "This step's status" %}:</span>
              <span class="step__status__value">
                  <span class="copy">{% trans "In Progress" %}</span>
              </span>
            </span>
            {% endblock %}
       </h2>
    </header>

    {% block body %}
    <div class="ui-slidable__content" aria-labelledby="oa_self_{{ xblock_id }}" id="oa_self_{{ xblock_id }}_content">
        <div class="wrapper--step__content">
            <div class="step__content">
                <article class="self-assessment__display">
                    <header class="self-assessment__display__header">
                        <h3 class="self-assessment__display__title">{% trans "Your Response" %}</h3>
                    </header>

                    {% trans "Your response to the question above:" as translated_label %}
                    {% include "openassessmentblock/oa_submission_answer.html" with answer=self_submission.answer answer_text_label=translated_label %}

                    {% trans "Associated File" as translated_header %}
                    {% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=self_file_url header=translated_header class_prefix="self-assessment" %}
                </article>

                <form class="self-assessment--001__assessment self-assessment__assessment" method="post">
                    {% include "openassessmentblock/oa_rubric.html" with rubric_type="self" submission=self_submission %}
                </form>
            </div>

            <div class="step__actions">
                <div class="message message--inline message--error message--error-server" tabindex="-1">
                    <h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
                    <div class="message__content"></div>
                </div>

                <ul class="list list--actions">
                    <li class="list--actions__item">
                        <button type="submit" class="self-assessment--001__assessment__submit action action--submit is--disabled">
                            <span class="copy">{% trans "Submit your assessment" %}</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% endblock %}
</li>
{% endspaceless %}
