--- a/sat_templates/templates/bulma/chat/chat.html	Thu Jun 22 16:31:26 2023 +0200
+++ b/sat_templates/templates/bulma/chat/chat.html	Wed Jun 28 10:40:50 2023 +0200
@@ -1,19 +1,63 @@
-{{ script.include('chat') }}
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
 {% block body %}
-    <div id="chat-panel">
-        {% if subject is defined %}
-            <div class="notification is-primary my-0">
-                {{- subject|urlize(nofollow=true,target='_blank') -}}
-            </div>
-        {% endif %}
-        <div id="messages" class="has-background-white pt-4 px-4">
+        {{ icon_defs("lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach", "paper-plane-empty", "doc", "download") }}
+
+    {# TODO: this should be done in a more generic way in dialog module #}
+    <div id="modal" class="modal">
+        <div class="modal-background"></div>
+        <div class="modal-content">
+            <p class="image">
+            <img id="modal-image" src="" alt="">
+            </p>
+        </div>
+        <button class="modal-close is-large" aria-label="close"></button>
+    </div>
+
+    <div id="chat-panel" class="is-flex is-flex-direction-column is-justify-content-space-between is-align-items-stretch pt-4"> <!-- calculate height depending on your navbar size -->
+        <!-- Header -->
+        <div id="header" class="box p-4 is-flex is-justify-content-space-between is-align-items-center is-flex-shrink-0">
+            {% if subject is defined %}
+                <h2 id="room-subject" class="title is-5 has-text-weight-bold">{{- subject|urlize(nofollow=true,target='_blank') -}}</h2>
+            {% endif %}
+        </div>
+
+        <!-- Messages -->
+        <div id="messages" class="box p-4 has-background-white mb-4 is-flex-grow-1 is-flex-direction-column-reverse is-overflow-auto">
             {% for msg in messages %}
                 {% include 'chat/message.html' %}
             {% endfor %}
         </div>
-        <textarea id="message_input" class="textarea mt-4 chat_input mb-4" name="message" type="text" rows="1" placeholder="{{_("enter your message")}}"></textarea>
+
+    <!-- Attachments -->
+    <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
+        {% for file in attachments %}
+            {% include 'chat/attachment_preview.html' %}
+        {% endfor %}
+    </div>
+
+    <!-- Input -->
+    <div id="input-area" class="field has-addons py-4 is-flex-shrink-0">
+        <p class="control is-expanded">
+            <textarea id="message_input" class="textarea" name="message" type="text" rows="1" placeholder="{{_("enter your message")}}"></textarea>
+        </p>
+        <div class="control">
+            <button class="button" id="attach_button">
+                <span class="icon is-small">
+                    {{ icon('attach', cls='has-text-info') }}
+                </span>
+            </button>
+            <input id="file_input" type="file" multiple="true" style="display: none" />
+        </div>
+        <div class="control">
+            <button class="button" id="send_button">
+                <span class="icon is-small">
+                    {{ icon('paper-plane-empty') }}
+                </span>
+            </button>
+        </div>
+    </div>
+
     </div>
 {% endblock body %}