{% 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">
                    {# 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=submission_start|utc|date:"N j, Y H:i e" time_until=submission_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
                </span>
                {% elif submission_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=submission_due|utc|date:"N j, Y H:i e" time_until=submission_due|timeuntil %}due <span class="date"> {{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
                </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>
                        {% if allow_file_upload %}
                        <li class="field">
                            <div id="upload__error">
                                <div class="message message--inline message--error message--error-server">
                                    <h3 class="message__title">{% trans "We could not upload this image" %}</h3>
                                    <div class="message__content"></div>
                                </div>
                            </div>
                            <label class="sr" for="submission__answer__upload">{% trans "Select an image to upload for this submission." %}</label>
                            <input type="file" id="submission__answer__upload" class="file--upload">
                            <button type="submit" id="file__upload" class="action action--upload is--disabled">{% trans "Upload your image" %}</button>
                        </li>
                        <li>
                            <div class="submission__answer__display__image is--hidden">
                                <img id="submission__answer__image"
                                     class="submission--image"
                                     {% if file_url %}
                                     alt="{% trans "The image associated with your submission." %}"
                                     {% endif %}
                                     src="{{ file_url }}"/>
                            </div>
                        </li>
                        {% endif %}
                    </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">{% trans "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>
                            {% if allow_latex %}
                            <li class="list--actions__item">
                                <button type="submit" id="submission__preview" class="action action--save submission__save is--disabled">{% trans "Preview in Latex"%}</button>
                                <div id="response__preview_explanation" class="response__submission__status">
                                    <h3 class="response__submission__status__title">
                                        {% trans "Click to preview your submission in Latex"%}
                                    </h3>
                                </div>
                            </li>
                            <li id = "submission__preview__item" class="list--actions__item">
                                <article class="submission__answer__display">
                                    <h3 class="submission__answer__display__title">Preview Response</h3>
                                    <div class="submission__answer__display__content">
                                        <p id="preview_content"></p>
                                    </div>
                                </article>
                            </li>
                            {% endif %}
                        </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 %}
