{% extends "_collapsible_box.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% block collapsible_box_icon %}
    message-circle
{% endblock collapsible_box_icon %}
{% block collapsible_box_title %}
    {% translate "Chat" %}
{% endblock collapsible_box_title %}
{% block collapsible_box_content %}
    <div id="chat-history"
         class="flex flex-col-reverse break-words border-gray-300 border max-h-116 overflow-y-auto">
        {% include "chat/_chat_messages.html" %}
    </div>
    <form id="chat-form"
          method="post"
          class="pt-4"
          action="{% spaceless %} {% if request.region %} {% url 'send_chat_message' region_slug=request.region.slug %} {% else %} {% url 'send_chat_message' %} {% endif %} {% endspaceless %}">
        {% csrf_token %}
        {% render_field chat_form.text rows="2" class="mb-2" %}
        <button id="send-chat-message" class="btn">
            <i icon-name="send"></i> {% translate "Send message" %}
        </button>
        <span id="chat-loading" class="px-4 hidden"><i icon-name="loader" class="animate-spin"></i></span>
        <span id="chat-network-error" class="text-red-500 px-4 hidden"><i icon-name="alert-triangle"></i> {% translate "A network error has occurred." %} {% translate "Please try again later." %}</span>
        <span id="chat-server-error" class="text-red-500 px-4 hidden"><i icon-name="alert-triangle"></i> {% translate "A server error has occurred." %} {% translate "Please contact the administrator." %}</span>
    </form>
{% endblock collapsible_box_content %}
