<div id="input-panel">
    <!-- Attachments -->
    <div id="attachments" class="attachments 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>

        <!-- Rich Editor Toolbar -->
        <div id="rich-edit-toolbar" class="field is-grouped is-grouped-multiline is-hidden">
            <div class="control">
                <button class="rich-editor-btn button" type="button" data-action="bold">
                    <span class="icon"><i class="fas fa-bold fa-sm"></i></span>
                </button>
            </div>
            <div class="control">
                <button class="rich-editor-btn button" type="button" data-action="italic">
                    <span class="icon"><i class="fas fa-italic fa-sm"></i></span>
                </button>
            </div>
            <div class="control">
                <button class="rich-editor-btn button" type="button" data-action="underline">
                    <span class="icon"><i class="fas fa-underline fa-sm"></i></span>
                </button>
            </div>
            <div class="control">
                <button class="rich-editor-btn button" type="button" data-action="list-bullet">
                    <span class="icon"><i class="fas fa-list-ul fa-sm"></i></span>
                </button>
            </div>
            <div class="control">
                <button class="rich-editor-btn button" type="button" data-action="list-ordered">
                    <span class="icon"><i class="fas fa-list-ol fa-sm"></i></span>
                </button>
            </div>
            <div class="control">
                <button class="rich-editor-btn button" type="button" data-action="link">
                    <span class="icon"><i class="fas fa-link fa-sm"></i></span>
                </button>
            </div>
        </div>

        <!-- Main Input -->
        <div class="field has-addons is-align-items-flex-end">
            <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">
                <button id="input-extra-button" class="button">
                    <span class="icon is-small">
                    {{ icon('ellipsis-vertical') }}
                    </span>
                </button>
            </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 id="message_input_area_rich" class="is-hidden"></div>
            </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>