{% load spire_core_tags %}

{% block message %}
    {% generate_id as message_intel_id %}
    <div
        class="col-auto mb-1 {{ message_class }}"
        @mouseover="show_message_menu = true"
        @mouseleave="show_message_menu = false"
        x-data="{
            show_message_menu: false,
            message_intel_str: '',
            init() {
                this.message_intel_str = JSON.parse(document.getElementById('{{ message_intel_id }}').textContent)
                {% if synthesis_speech %}this.start_speaking(this.message_intel_str){% endif %}
                $el.scrollIntoView({behavior: 'smooth'})
            }
        }"
    >
        <div class="container-fluid">
            {{ message_intel.content_to_str|json_script:message_intel_id }}
            <div class="row">
                <div class="col fs--1 {{ sender_class }}">
                    {% block message_sender %}
                        {{ sender }}
                    {% endblock %}
                </div>
            </div>
            <div class="row">
                <div class="col-12 px-3 py-2 rounded-3 shadow-sm {{ content_class|default:'border' }}">
                    {% block message_content %}
                        {{ message_intel.content_to_str|linebreaksbr }}
                    {% endblock %}
                </div>
            </div>
            <div
                class="row justify-content-end"
                :class="show_message_menu ? 'opacity-100' : 'opacity-0'"
            >
                <div class="col-auto px-0">
                    <div @click="start_speaking(message_intel_str)" class="py-1 px-2 cursor-pointer">
                        <i class="bi bi-soundwave"></i>
                    </div>
                </div>
                <div class="col-auto pe-0 ps-1">
                    <div @click="send_chat({message_body: message_intel_str})" class="py-1 px-2 cursor-pointer">
                        <i class="bi bi-repeat"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}