{% load tz %}
{% load i18n %}
{% spaceless %}
{% block list_item %}
<li class="openassessment__steps__step step--response is--in-progress is--showing ui-slidable__container"
    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_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
            {% endblock %}
                <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|timezone:time_zone|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|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
                    {% 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_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_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 class="response__submission">
                    <ol class="list list--fields response__submission__content">
                        {% for part in saved_response.answer.parts %}
                            <li class="submission__answer__part">
                                <article class="submission__answer__part__prompt">
                                    <h2 class="submission__answer__part__prompt__title">{% trans "The prompt for this section." %}</h2>

                                    <div class="submission__answer__part__prompt__copy">
                                        {{ part.prompt.description|linebreaks }}
                                    </div>
                                </article>
                                <div class="field field--textarea submission__answer__part__text">
                                    <label class="sr" for="submission__answer__part__text__{{ forloop.counter }}__{{ xblock_id }}">{% trans "Your response to the question above." %}</label>
                                    <textarea
                                        id="submission__answer__part__text__{{ forloop.counter }}__{{ xblock_id }}"
                                        class="submission__answer__part__text__value"
                                        placeholder="{% trans "Enter your response to the question above." %}"
                                        maxlength="100000"
                                    >{{ part.text }}</textarea>
                                </div>
                            </li>
                        {% endfor %}
                        {% if file_upload_type %}
                        <li class="field">
                            <div class="upload__error">
                                <div class="message message--inline message--error message--error-server" tabindex="-1">
                                    <h3 class="message__title">{% trans "We could not upload this file" %}</h3>
                                    <div class="message__content"></div>
                                </div>
                            </div>
                            <label class="sr" for="submission_answer_upload_{{ xblock_id }}">{% trans "Select a file to upload for this submission." %}</label>
                            <input type="file" class="submission__answer__upload file--upload" id="submission_answer_upload_{{ xblock_id }}">
                            <button type="submit" class="file__upload action action--upload is--disabled">{% trans "Upload your file" %}</button>
                        </li>
                        {% endif %}

                        {% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=file_url class_prefix="submission__answer"%}
                    </ol>

                    <span class="tip">{% trans "You may continue to work on your response until you submit it." %}</span>

                    <div class="response__submission__actions">
                        <div class="message message--inline message--error message--error-server" tabindex="-1">
                            <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" class="action action--save submission__save is--disabled" aria-describedby="response__save_status__{{ xblock_id }}">
                                    {% trans "Save your progress" %}
                                </button>

                                <div id="response__save_status__{{ xblock_id }}" class="response__submission__label">
                                    <span class="sr">{% trans "Your Submission Status" %}:</span>
                                    {{ save_status }}
                                </div>
                            </li>
                            {% if allow_latex %}
                                <li class="list--actions__item">
                                    <button type="submit" class="submission__preview  action action--save submission__save is--disabled" aria-describedby="response__preview_explanation__{{ xblock_id }}">
                                        {% trans "Preview in LaTeX"%}
                                    </button>
                                    <div id="response__preview_explanation__{{ xblock_id }}" class="response__submission__label">
                                        {% trans "Click to preview your submission in LaTeX"%}
                                    </div>
                                </li>
                                <li class="submission__preview__item list--actions__item">
                                    <article class="submission__answer__display">
                                        <h3 class="submission__answer__display__title">{% trans "Preview Response"%}</h3>
                                        <div class="submission__answer__display__content">
                                            <p class="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" tabindex="-1">
                    <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">
                        <button type="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>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% endblock %}
</li>
{% endspaceless %}
