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

<div id="{{msg.id}}" class="media is-chat-message msg_{{msg.type}} {{'own_msg' if msg.from_ == own_jid}}" style="padding: 0.5em;" role="listitem" aria-label="Chat Message">
    {%- if msg.type != "info" %}
        {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
        <figure class="media-left pt-1">
            {{ avatar.avatar(msg.from_, "is-32x32") }}
        </figure>
    {% endif -%}
    <div class="media-content is-relative">
        <div class="content">
            {%- if msg.type != "info" %}
                <nav class="level is-mobile is-marginless is-size-7">
                    <div class="level-left has-text-weight-bold">
                        <div class="level-item">
                            <span class="author" id="msg_author_{{msg.id}}">{{author}}</span>
                        </div>
                    </div>
                    <div class="level-right is-italic">
                        <div class="level-item">
                            <span class="date" id="msg_date_{{msg.id}}">{{msg.timestamp|date_fmt('auto_day')}}</span>
                            <div id="status_icons_{{msg.id}}" class="status-icons level-item has-padding-left">
                                {% if msg.encrypted %}
                                    {{ icon('lock-filled', cls='icon is-small has-text-success') }}
                                {% else %}
                                    {{ icon('lock-open', cls='icon is-small has-text-danger') }}
                                {% endif %}
                                {% if msg.received %}
                                    {{ icon('ok', cls='icon is-small has-text-link') }}
                                {% endif %}
                                {% if msg.edited %}
                                    {{ icon('pencil', cls='icon is-small has-text-info') }}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </nav>
            {% endif -%}
            <p class="msg_body has-whitespace-pre-wrap {{ "has-text-info" if msg.type=="info" }}" id="msg_body_{{msg.id}}" style="margin: 0;">
            {{- msg.html or (msg.text|e|urlize|safe) -}}
            </p>

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

            <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
                {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
                {{ icon('smile', cls='icon is-small action-button reaction-button', id='msg_actions_{{msg.id}}') }}
                {{ icon('dot-3', cls='icon is-small action-button extra-button', id='msg_actions_{{msg.id}}') }}
            </div>
            <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;">
                {% if msg.extra.reactions is defined %}
                    {% set reactions = msg.extra.get("reactions") %}
                    {% include 'chat/reactions.html' %}
                {% endif %}
            </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>
</div>