{% 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" aria-hidden="true"></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>
                        {% if workflow_cancellation.cancelled_by %}
                            {% blocktrans with removed_datetime=workflow_cancellation.cancelled_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 %}
                        {% else %}
                            {% blocktrans with removed_datetime=workflow_cancellation.cancelled_at|utc|date:"N j, Y H:i e" %}
                                Your submission was cancelled on {{ removed_datetime }}
                            {% endblocktrans %}
                        {% endif %}
                    </p>
                    <p>
                        <!-- Comments: Reason for Cancellation-->
                        {% blocktrans with comments=workflow_cancellation.comments %}
                            Comments: {{ comments }}
                        {% endblocktrans %}
                    </p>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
