{% load i18n %}
<div class="freetextresponse xmodule_display xmodule_CapaModule problem">
    <h3 class="problem-header">{{ display_name }}</h3>
    <div class="problem-progress">{{ problem_progress }}</div>
    <div class="prompt">{{ prompt|safe }}</div>
    <div class="word-count-message">{{ word_count_message }}</div>
    <div class="capa_inputtype textline">
        <div class="user_input {{ indicator_class }}">
            <textarea id="student_answer_{{ usage_id }}" class="student_answer" rows="20">{{ student_answer }}</textarea>
            <span class="status {{ visibility_class }}" aria-describedby="student_answer_{{ usage_id }}"></span>
        </div>
    </div>
    {% if display_other_responses %}
        <label for="messageCheckbox_{{ usage_id }}">
            <input id="messageCheckbox_{{ usage_id }}" class="messageCheckbox" type="checkbox" checked>
            {% trans "Allow my response to possibly be visible by other learners after submitting their response" %}
        </label>
        <br>
    {% endif %}
    <div class="capa_alert submission-received">{{ submitted_message }}</div>
    <div class="action">
        {% if not is_past_due %}
            <button class="check Submit {{ nodisplay_class }}" data-checking="{% trans "Checking..." %}" data-value="{% trans "Submit" %}">
                {% trans "Submit" %}
            </button>
            <button class="save {{ nodisplay_class }}" data-checking="{% trans "Checking..." %}" data-value="{% trans "Save" %}">
                {% trans "Save" %}
            </button>
        {% endif %}
        <div class="used-attempts-feedback" aria-live="polite">{{ used_attempts_feedback }}</div>
    </div>
    <div class="capa_alert user_alert">{{ user_alert }}</div>
    {% if display_other_responses %}
        <div class="responses-box {% if not student_answer %}hidden{% endif %}">
            <button class="hide-button">
                <span class="hide">{% trans "Hide" %}</span>
                <span class="show">{% trans "Show" %}</span>
                <span class="sr">{% trans "peer responses" %}</span>
            </button>
            <p class="responses-title">{% trans "Submissions by others" %}</p>
            <ul class="response-list" data-noresponse="{% trans "No responses to show at this time" %}">
                {% for response in other_responses %}
                    <li class="other-student-responses">{{ response.answer }}</li>
                {% empty %}
                    <li class="no-response">{% trans "No responses to show at this time" %}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
</div>