--- a/sat_templates/templates/bulma/chat/message.html	Thu Jun 22 16:31:26 2023 +0200
+++ b/sat_templates/templates/bulma/chat/message.html	Wed Jun 28 10:40:50 2023 +0200
@@ -1,31 +1,69 @@
 {% 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.full()}}">
+<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 != C.MESS_TYPE_INFO %}
         {%- set author = identities[msg.from_].nicknames[0] | default(msg.from_) -%}
-        <figure class="media-left">
+        <figure class="media-left pt-1">
             {{ avatar.avatar(msg.from_, "is-32x32") }}
         </figure>
     {% endif -%}
-    <div class="media-content">
+    <div class="media-content is-relative">
         <div class="content">
             {%- if msg.type != C.MESS_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">{{author}}</span>
+                            <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">{{msg.timestamp|date_fmt('auto_day')}}</span>
+                            <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">
-            {{- msg.html or (msg.text|urlize(nofollow=true, target="_blank")) -}}
+            <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;">
+            {{- msg.html or (msg.text|urlize) -}}
             </p>
+            <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
+                <div class="level-right">
+                    {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}
+                    {{ icon('dot-3', cls='icon is-small action-button', id='msg_actions_{{msg.id}}') }}
+                </div>
+            </div>
+            <div id="msg_reactions_{{msg.id}}" style="margin-top: 0.5em;">
+                <!-- Reactions will go here -->
+            </div>
+        {% if msg.attachments %}
+            <div class="message-attachments pt-2">
+                {%- for attachment in msg.attachments %}
+                    <figure class="image message-attachment">
+                        {%- if attachment.media_type|media_type_main == 'image' %}
+                            <img src="{{attachment.sources[0].url}}" alt="{{attachment.name}}">
+                        {%- else %}
+                            {{ icon('doc', cls='icon') }}
+                        {%- endif %}
+                        <figcaption class="has-text-centered is-size-7">
+                            <a href="{{attachment.sources[0].url}}" target="_blank" class="has-text-grey">{{attachment.name}}</a>
+                        </figcaption>
+                    </figure>
+                {%- endfor %}
+            </div>
+        {% endif %}
         </div>
     </div>
 </div>