<div id="input-panel">
    <!-- Attachments -->
    <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
        {% for file in attachments %}
            {% include 'chat/attachment_preview.html' %}
        {% endfor %}
    </div>

    <div id="message_input" class="chat-input">

        <!-- Reply Indicator -->
        <div id="reply-to" class="mb-3 is-hidden">
            <div class="is-flex is-justify-content-space-between is-align-items-center">
                <div>
                    <span class="is-size-6"><strong>{% trans %}Replying to :{% endtrans %}</strong></span>
                    <div id="reply-to_message" class="mt-1 ml-1 is-size-7"></div>
                </div>
                <button id="cancel_reply_btn" class="button is-small is-danger is-rounded">Cancel</button>
            </div>
        </div>


        <div class="field has-addons">
            <div class="control">
                <button id="attach-button" class="button">
                    <span class="icon is-small">
                    {{ icon('paperclip') }}
                    </span>
                </button>
                <input id="file-input" type="file" multiple="true" style="display: none" />
            </div>
            <div class="control is-expanded">
             <textarea id="message_input_area" class="textarea" name="message_input_area" type="text" rows="1" placeholder="{{_("Type your message…")}}"></textarea>
            </div>
            <div class="control">
                <button class="button is-primary">
                    <span class="icon is-small">
                        <i class="fas fa-paper-plane"></i>
                    </span>
                    <span id="send_button">{% trans %}Send{% endtrans %}</span>
                </button>
            </div>
        </div>
    </div>
</div>