Add chat

app/website/templates/layouts/base.html

@@ -38,7 +38,7 @@
                   </li>
                   <li>
                       {# To page Chat #}
-                      {% #link action="page" value="chat" scroll-up="true" %}Chat{% /link %}
+                      <a href="#" onclick="document.querySelector('#chat').classList.toggle('hidden')">Chat</a>
                   </li>
                   <li>
                       {# To page About #}
@@ -49,5 +49,8 @@
         </header>
         <main id="main"></main>
     </div>
+    <section hx-ws="connect:ws:{{ DOMAIN }}/ws/chat/">
+        <div id="chat" class="hidden"></div>
+    </section>
 </body>
 </html>

app/website/templates/pages/chat.html

@@ -1,3 +1,63 @@
-<main id="main" data-scroll-to-top="true">
-    soy el chat
-</main>
+{% load slippers %}
+<div id="chat" data-scroll-to-top="false">
+    <style>
+        #chat {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 17rem;
+            height: 35rem;
+            border: 1px solid;
+            padding: 1rem;
+            background-color: var(--background-color);
+            margin: 0;
+            transition: .5s
+        }
+
+        .hidden {
+            left: -17rem !important;
+        }
+
+        .messages {
+            height: 10rem;
+            overflow-y: scroll;
+            border: 1px solid;
+        }
+
+    </style>
+    <h1>Chat</h1>
+    <div class="messages" data-scroll-to-bottom="true">
+        <table>
+          <tbody>
+          {% for message in messages %}
+            <tr>
+              <th>{{ message.username }}</th>
+              <td>{{ message.text }}</td>
+            </tr>
+          {% endfor %}
+          </tbody>
+        </table>
+    </div>
+    <form>
+        <input type="hidden" name="action" value="new-message">
+        <label>
+            <span>Username:</span>
+            <input
+                    id="new-username"
+                    type="text"
+                    name="new-username"
+                    value=""
+            >
+        </label>
+        <label>
+            <span>Message:</span>
+            <input
+                    id="new-text"
+                    type="text"
+                    name="new-text"
+                    value=""
+            >
+        </label>
+        <input type="button" hx-ws="send" hx-trigger="click" value="Send">
+    </form>
+</div>

app/website/templates/pages/talks.html

@@ -11,6 +11,7 @@
                     id="search"
                     type="search"
                     name="search"
+                    autocomplete="off"
                     hx-ws="send"
                     hx-trigger="keyup changed delay:1s"
                     value="{{ search }}"