{% load i18n %}
{% if self.character_image %}
    <div class="shortanswer_image">
        <img src="{{ self.character_image }}" />
    </div>
{% endif %}

<div class="shortanswer_block">
    <div>
        <div id="question-text">
            {{ question_text | safe }}
        </div>
    </div>

    <div id="chatbox">
        <div class="chat-history" role="log" aria-live="polite" aria-relevant="additions text" aria-atomic="false">
            <div class="chat-message-container chat-spinner-container">
                <div class="chat-message message-spinner" style="display: none;" aria-hidden="true">
                    <div class="bounce1">
                    </div>
                    <div class="bounce2">
                    </div>
                    <div class="bounce3">
                    </div>
                </div>
            </div>
        </div>
        <div class="sr-only chat-status" role="status" aria-live="polite"></div>
        <div class="chat-instructions">
            <p>{% trans "Use the Submit button or press Ctrl+Enter (Cmd+Enter on Mac) to send your message. Use Shift+Enter to insert a new line." %}</p>
        </div>
        <div class="chat-submit-row">
            {% if self.allow_reset %}
                <button type="button" class="chat-button chat-reset-button">Reset chat</button>
            {% endif %}
            {% if has_finish_button %}
                <button type="button" class="chat-button chat-finish-button">Submit for evaluation</button>
            {% endif %}
            <textarea class="chat-user-input" rows="1" aria-describedby="chat-instructions" placeholder="Type your answer here" maxlength="1000"></textarea>
            <button type="button" class="btn btn-primary chat-button chat-submit-button">Submit<i class="fa fa-paper-plane"></i></button>
        </div>
    </div>
</div>