{% import 'components/avatar.html' as avatar with context %}

{% if chat_type == "group" %}
    {% set own_msg = msg.from_==own_local_jid %}
{% else %}
    {% set own_msg = msg.from_|bare_jid==own_local_jid|bare_jid %}
{% endif %}

<div
    id="{{msg.id}}"
    class="media chat-message msg_{{msg.type}} {{'own_msg' if own_msg}} {{ 'is-retracted' if msg.extra.retracted }}"
    aria-label="{{ 'Retracted Message' if msg.extra.retracted else 'Chat Message' }}"
    data-from='{{msg.from_}}'
    {% if msg.extra.editions %}data-editions='{{msg.extra.editions|tojson}}'{% endif %}
    {% if msg.extra.thread %}data-thread='{{msg.extra.thread}}'{% endif %}
    >
    {%- if msg.type != "info" %}
        {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
        <figure class="media-left">
            {{ avatar.avatar(msg.from_) }}
        </figure>
    {% endif -%}
    <div class="media-content is-relative">
            {%- if msg.type != "info" %}

                <div>

                    <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
                    <span class="date" id="msg_date_{{msg.id}}">{{(msg.extra.updated or msg.timestamp)|date_fmt('short', tz_name=tz_name)}}</span>
                    <span id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left">
                        {% if msg.reply_to or msg.extra.thread %}
                            {{ icon('comment-dots', cls='icon is-small message-thread') }}
                        {% endif %}
                        {% if msg.extra.editions %}
                            {{ icon('pencil', cls='icon is-small message-editions') }}
                        {% endif %}
                        {% if msg.encrypted %}
                            {{ icon('lock', cls='icon is-small has-text-success') }}
                        {% else %}
                            {{ icon('unlock', cls='icon is-small has-text-danger') }}
                        {% endif %}
                        {% if msg.received %}
                            {{ icon('check', cls='icon is-small has-text-link') }}
                        {% endif %}
                        {% if msg.edited %}
                            {{ icon('pencil', cls='icon is-small has-text-info') }}
                        {% endif %}
                    </span>
                </div>

               {% if msg.extra.origin or msg.extra.get("is-bot") %}
                   <div class="tags mb-0 pb-1">
                       {% if msg.extra.origin == "smtp" %}

                           <span data-type="{{msg.extra.origin}}" class="message-origin tag is-hoverable is-light">🖂 {% trans %}email{% endtrans %}</span>
                       {% else %}
                           <span class="message-origin tag is-hoverable is-light">{{msg.extra.origin}}</span>
                       {% endif %}
                       {% if msg.extra.get("is-bot") %}
                           <span data-type="{{msg.extra.origin}}" class="tag is-light">🤖 bot</span>
                       {% endif %}
                   </div>
               {% endif %}

            {% endif -%}
            <div class="message-core">
                <p class="message-body {{ "has-text-info" if msg.type=="info" or msg.extra.retracted }} m-0" id="message-body_{{msg.id}}">
                   {%- if msg.extra.retracted %}
                       {% trans %}This message has been retracted.{% endtrans %}
                   {% else %}
                       {{- msg.html or (msg.text|e|urlize|safe) -}}
                   {% endif -%}
                </p>

                <div class="url-previews is-hidden">
                    <div class="icon-container"></div>
                </div>

                <div
                   class="level mb-0 mt-1 message-footer {{ "is-hidden" if msg.extra.retracted }}"
                   >
                   <div class="level-left">
                       {% if msg.extra.keywords %}
                           <div class="tags pb-1">
                               {% for keyword in msg.extra.keywords %}
                                   <span class="message-keyword tag is-hoverable is-info">{{keyword}}</span>
                               {% endfor %}
                           </div>
                       {% endif %}
                   </div>
                    <div class="level-right message-actions">
                        {# {{ icon('share-nodes', cls='icon is-small action-button', id='msg_share_' + msg.id) }} #}
                        {{ icon('reply', cls='icon is-small action-button reply-button')}}
                        {{ icon('regular face-smile', cls='icon is-small action-button reaction-button') }}
                        {{ icon('ellipsis', cls='icon is-small action-button extra-button') }}
                    </div>
                </div>

                <div id="msg_reactions_{{msg.id}}">
                    {% if msg.extra.reactions is defined %}
                        {% set reactions = msg.extra.get("reactions") %}
                        {% include 'components/reactions.html' %}
                    {% endif %}
                </div>
            </div>
        {% if msg.attachments %}
            <div class="message-attachments pt-2">
                {%- for attachment in msg.attachments %}
                    <figure class="image message-attachment">
                        {%- if not attachment.url -%}
                            <div class="notification is-warning">
                                <div class="is-size-6 has-text-weight-semibold mb-1">
                                    {% trans name=attachment.name %}Attachment: {{name}}{% endtrans %}
                                </div>

                                <div class="is-size-7 mb-1">
                                    {% trans %}Cannot be opened as there are no sources available.{% endtrans %}
                                </div>

                            </div>
                        {%- else -%}
                            {%- if attachment.media_type|media_type_main == 'image' %}
                                <img src="{{attachment.url}}" alt="{{attachment.name}}">
                            {%- else %}
                                {{ icon('doc', cls='icon') }}
                            {%- endif %}
                            <figcaption class="has-text-centered is-size-7">
                                <a href="{{attachment.url}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
                            </figcaption>
                        {%- endif -%}
                    </figure>
                {%- endfor %}
            </div>
        {% endif %}
    </div>
</div>