ail-framework/var/www/templates/chats_explorer/block_message.html

<style>
    .chat-message-left,
    .chat-message-right {
        display: flex;
        flex-shrink: 0;
    }
    .chat-message-right {
        flex-direction: row-reverse;
        margin-left: auto
        }
    .divider:after,
    .divider:before {
        content: "";
        flex: 1;
        height: 2px;
        background: #eee;
    }
    .message_image {
        max-width: 50%;
        filter: blur(5px);
    }
</style>



<div class="chat-message-left pb-1">
    <div>
        <a href="{{ url_for('chats_explorer.objects_user_account')}}?subtype={{ message['user-account']['subtype'] }}&id={{ message['user-account']['id'] }}">
            <img src="{% if message['user-account']['icon'] %}{{ url_for('objects_image.image', filename=message['user-account']['icon'])}}{% else %}{{ url_for('static', filename='image/ail-icon.png') }}{% endif %}"
                 class="rounded-circle mr-1" alt="{{ message['user-account']['id'] }}" width="40" height="40">
        </a>
        <div class="text-muted small text-nowrap mt-2">{{ message['hour'] }}</div>
    </div>
    <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
        <div class="font-weight-bold mb-1">
            {% if message['user-account']['username'] %}
                {{ message['user-account']['username']['id'] }}
            {% else %}
                {{ message['user-account']['id'] }}
            {% endif %}
        </div>
        {% if message['reply_to'] %}
            <div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
                <div class="font-weight-bold mb-1">
                    {% if message['reply_to']['user-account']['username'] %}
                        {{ message['reply_to']['user-account']['username']['id'] }}
                    {% else %}
                        {{ message['reply_to']['user-account']['id'] }}
                    {% endif %}
                </div>
                <pre class="my-0">{{ message['reply_to']['content'] }}</pre>
                {% if message['reply_to']['translation'] %}
                    <hr class="m-1">
                    <div class="my-0 text-secondary">{{ message['reply_to']['translation'] }}</div>
                {% endif %}
                {% for tag in message['reply_to']['tags'] %}
                    <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
                {%  endfor %}
                <div class="text-muted small text-nowrap">{{ message['reply_to']['full_date'] }}</div>
    {#              <div class="">#}
    {#                  <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ message['reply_to']['type'] }}&subtype={{ message['reply_to']['subtype'] }}&id={{ message['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
    {#                  <a class="btn btn-light btn-sm text-secondary py-0" href="{{ message['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
    {#              </div>#}
            </div>
        {% endif %}
        {% if message['images'] %}
            {% for message_image in message['images'] %}
                <img class="message_image mb-1" src="{{ url_for('objects_image.image', filename=message_image)}}">
            {%  endfor %}
        {% endif %}
        {% if message['files-names'] %}
            {% for file_name in message['files-names'] %}
                <div class="flex-shrink-1 bg-white border-primary text-secondary rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
                    <i class="far fa-file fa-3x"></i> {{ file_name }}
                </div>
            {%  endfor %}
        {% endif %}
        <pre class="my-0">{{ message['content'] }}</pre>
        {% if message['translation'] %}
            <hr class="m-1">
            <pre class="my-0 text-secondary">{{ message['translation'] }}</pre>

            {% set mess_id_escape= message['id'] | replace("/", "_") %}
            <button class="btn btn-light p-0" type="button" data-toggle="collapse" data-target="#collapseTrans{{ mess_id_escape }}" aria-expanded="false" aria-controls="collapseTrans{{ mess_id_escape }}">
                <i class="fas fa-language"></i>
            </button>
            <div class="collapse" id="collapseTrans{{ mess_id_escape }}">
                <div class="card card-body">
                    <form method="post" action="{{ url_for('chats_explorer.objects_message_translate') }}" target="_blank">
                        <input type="text" id="id" name="id" value="{{message['id']}}" hidden>
                        <input type="text" id="target" name="target" value="{{translation_target}}" hidden>
                        <span>{{translation_target}}:</span>
                        <textarea class="form-control" id="translation" name="translation">{{ message['translation'] }}</textarea>
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-pen-alt"> Manual Translation</i>
                        </button>
                    </form>
                </div>
            </div>

        {% endif %}
        {% for reaction in message['reactions'] %}
            <span class="border rounded px-1">{{ reaction }} {{ message['reactions'][reaction] }}</span>
        {%  endfor %}
        {% if message['thread'] %}
            <hr class="mb-1">
            <div class="my-2 text-center">
                <a href="{{ url_for('chats_explorer.objects_thread_messages')}}?uuid={{ message['thread']['subtype'] }}&id={{ message['thread']['id'] }}"><i class="far fa-comment"></i> {{ message['thread']['nb'] }} Messages</a>
            </div>
        {% endif %}
        {% for tag in message['tags'] %}
            <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
        {%  endfor %}
        <div class="">
            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ message['type'] }}&subtype={{ message['subtype'] }}&id={{ message['id'] }}"><i class="fas fa-project-diagram"></i></a>
            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ message['link'] }}"><i class="fas fa-eye"></i></a>
        </div>
    </div>
</div>