{% load spire_core_tags %}

{% block message %}
    {% generate_id as message_intel_id %}

    <div
        class="col-auto mb-1 {{ message_class }}"
        @mouseleave="show_message_menu = false"
        @mouseover="show_message_menu = true"
        style="max-width: 70%;"
        x-data="{
            message_intel_str: '',
            show_message_menu: false,

            init() {
                this.message_intel_str = JSON.parse(document.getElementById('{{ message_intel_id }}').textContent)
                {% if synthesis_speech %}$dispatch('speak', {text: this.message_intel_str}){% endif %}
                {% if not is_loading %}$el.scrollIntoView({behavior: 'smooth'}){% endif %}
            }
        }"
    >
        {{ message_intel.render_to_str|json_script:message_intel_id }}

        <div class="px-1 text-muted {{ sender_class }}" style="font-size: 0.7rem;">
            {% block message_sender %}
                <span class="fw-semibold">{{ sender }}</span>
            {% endblock %}

            {% if message_timestamp %}
                <span>- {{ message_timestamp }}</span>
            {% endif %}
        </div>

        <div class="d-inline-block px-2 py-1 rounded-3 shadow-sm {{ content_class|default:'border' }}">
            {% block message_content %}
                {{ message_intel.render_to_str|linebreaksbr }}
            {% endblock %}
        </div>

        <div
            :class="show_message_menu ? 'opacity-100' : 'opacity-0'"
            class="d-flex justify-content-end"
        >
            <div @click="$dispatch('speak', {text: message_intel_str})" class="py-1 px-2 cursor-pointer">
                <i class="bi bi-soundwave"></i>
            </div>
            <div @click="$dispatch('send-message', {message_body: message_intel_str})" class="py-1 px-2 cursor-pointer">
                <i class="bi bi-repeat"></i>
            </div>
        </div>
    </div>
{% endblock %}