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

<div class="shortanswer_block">
    <div>
        <div id="question-text">
            Loading ..
        </div>
    </div>

    <div>
        <div class="chat-history">
            <div class="chat-message-container" id="chat-spinner-container">
                <div class="chat-message message-spinner" style="display: none;">
                    <div class="bounce1">
                    </div>
                    <div class="bounce2">
                    </div>
                    <div class="bounce3">
                    </div>
                </div>
            </div>
        </div>
        <div class="submit-row">
            {% if self.allow_reset %}
                <span id="reset-button" class="disabled-btn">Reset chat</span>
            {% endif %}
            <textarea class="user-input" rows="1" placeholder="Type your answer here" maxlength="1000"></textarea>
            <span id="submit-button">Submit <i class="fa fa-paper-plane"></i></span>
        </div>
    </div>
</div>