{% extends "openassessmentblock/response/oa_response.html" %}
{% load i18n %}
{% load tz %}

{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility has--error">
{% endblock %}

{% block title %}
    <span class="step__status">
      <span class="step__status__label">{% trans "This step's status" %}:</span>
      <span class="step__status__value">
        <i class="icon fa fa-exclamation-triangle"></i>
        <span class="copy">{% trans "Cancelled" %}</span>
      </span>
    </span>
{% endblock %}

{% block body %}
    <div class="ui-toggle-visibility__content">
        <div class="wrapper--step__content">

            <div class="step__message message message--incomplete">
                <h3 class="message__title">{% trans "Submission Cancelled" %}</h3>

                <div class="message__content">
                  <p>
                    {% blocktrans with removed_datetime=workflow_cancellation.created_at|utc|date:"N j, Y H:i e" removed_by_username=workflow_cancellation.cancelled_by %}
                        Your submission has been cancelled by {{ removed_by_username }} on {{ removed_datetime }}
                    {% endblocktrans %}
                    <br>
                    <!-- Comments: Reason for Cancellation-->
                    {% blocktrans with comments=workflow_cancellation.comments %}
                        Comments: {{ comments }}
                    {% endblocktrans %}
                  </p>
                </div>

                <div class="step__content">
                    <article class="submission__answer__display">
                        <h3 class="submission__answer__display__title">{% trans "Your Response" %}</h3>

                        <div class="submission__answer__display__content">
                            {{ student_submission.answer.text|linebreaks }}
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
