{% load tz %}
{% load i18n %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
{% endblock %}

    <header class="step__header ui-toggle-visibility__control">
        <h2 class="step__title">
            <span class="step__counter"></span>
            <span class="wrapper--copy">
                <span class="step__label">{% trans "Your Response" %}</span>
                {% if submission_start %}
                <span class="step__deadline">available
                    <span class="date">
                        {{ submission_start|utc|date:"N j, Y H:i e" }}
                        (in {{ submission_start|timeuntil }})
                    </span>
                </span>
                {% elif submission_due %}
                <span class="step__deadline">due
                    <span class="date">
                        {{ submission_due|utc|date:"N j, Y H:i e" }}
                        (in {{ submission_due|timeuntil }})
                    </span>
                </span>
                {% endif %}
            </span>
        </h2>

        {%  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 %}
    </header>

    {% block body %}
    <div class="ui-toggle-visibility__content">
        <div class="wrapper--step__content">
            <div class="step__instruction">
                <p>
                    {% trans "Enter your response to the question." %}
                    {% if submission_due %}
                    {% trans "You can save your progress and return to complete your response at any time before the due date" %} (<span class="step__deadline"><span class="date">{{ submission_due|utc|date:"l, N j, Y H:i e" }}</span></span>).
                    {% else %}
                    {% trans "You can save your progress and return to complete your response at any time." %}
                    {% endif %}
                    <strong class="emphasis">{% trans "After you submit your response, you cannot edit it" %}</strong>.
                </p>
            </div>

            <div class="step__content">
                <form id="response__submission" class="response__submission">
                    <ol class="list list--fields response__submission__content">
                        <li class="field field--textarea submission__answer" id="submission__answer">
                            <label class="sr" for="submission__answer__value">{% trans "Enter your response to the question." %}</label>
                            <textarea
                                id="submission__answer__value"
                                placeholder=""
                                maxlength="100000"
                            >{{ saved_response }}</textarea>
                            <span class="tip">{% trans "You may continue to work on your response until you submit it." %}</span>
                        </li>
                    </ol>

                    <div class="response__submission__actions">
                        <div class="message message--inline message--error message--error-server">
                            <h3 class="message__title">{% trans "We could not save your progress" %}</h3>
                            <div class="message__content"></div>
                        </div>

                        <ul class="list list--actions">
                            <li class="list--actions__item">
                                <button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>

                                <div id="response__save_status" class="response__submission__status">
                                    <h3 class="response__submission__status__title">
                                        <span class="sr">{% trans "Your Submission Status" %}:</span>
                                        {{ save_status }}
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

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

                <ul class="list list--actions">
                    <li class="list--actions__item">
                        <a aria-role="button" href="#" id="step--response__submit"
                            class="action action--submit step--response__submit {{ submit_enabled|yesno:",is--disabled" }}">
                            <span class="copy">{% trans "Submit your response and move to the next step" %}</span>
                            <i class="ico icon-caret-right"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% endblock %}
</li>
{% endspaceless %}
