Working django layout

views/chat.html

@@ -0,0 +1,5 @@
+<div class="chat-container">
+    <h1>Chat Page</h1>
+    {% include "partials/chat-messages.html" %}
+    {% include "partials/chat-input.html" %}
+</div>

views/layouts/main.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>JADE 2.0</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
+</head>
+
+<body>
+    {% include "partials/navbar.html" %}
+
+    {{embed}}
+
+    <script src="https://unpkg.com/htmx.org@1.9.11"></script>
+    <style>
+        .column {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .message {
+            max-width: 90%;
+            margin-bottom: 10px;
+        }
+
+        .user-message {
+            align-self: flex-start;
+        }
+
+        .bot-message {
+            align-self: flex-end;
+        }
+    </style>
+
+</body>
+
+</html>

views/partials/bot-message.html

@@ -0,0 +1,12 @@
+<article class="message bot-message">
+    <div class="message-header">
+        <p>Bot</p>
+        <form>
+            <input type="hidden">
+            <button class="delete" aria-label="delete"></button>
+        </form>
+    </div>
+    <div class="message-body">
+        {{ Message.Content }}
+    </div>
+</article>

views/partials/chat-input.html

@@ -0,0 +1,3 @@
+<form>
+    <input class="input" type="text" placeholder="Type your message here..." name="message" />
+</form>

views/partials/chat-messages.html

@@ -0,0 +1,11 @@
+<div class="columns is-centered">
+    <div class="column is-half">
+        {% for Message in Messages %}
+        {% if Message.User == "User" %}
+        {% include "partials/user-message.html" %}
+        {% else %}
+        {% include "partials/bot-message.html" %}
+        {% endif %}
+        {% endfor %}
+    </div>
+</div>

views/partials/navbar.html

@@ -0,0 +1,19 @@
+<nav class="navbar is-primary">
+    <div class="navbar-brand">
+        <a class="navbar-item" href="https://www.bouvai.com">
+            <img src="/bouvai.png">
+        </a>
+    </div>
+    <div class="navbar-menu">
+        <div class="navbar-start">
+            <a class="navbar-item" href="/">
+                Home
+            </a>
+            <a class="navbar-item" href="/chat">
+                Chat
+            </a>
+        </div>
+        <div class="navbar-end">
+        </div>
+    </div>
+</nav>

views/partials/user-message.html

@@ -0,0 +1,12 @@
+<article class="message user-message">
+    <div class="message-header">
+        <p>User</p>
+        <form>
+            <input type="hidden">
+            <button class="delete" aria-label="delete"></button>
+        </form>
+    </div>
+    <div class="message-body">
+        {{ Message.Content }}
+    </div>
+</article>

views/welcome.html

@@ -0,0 +1,6 @@
+<div class="columns">
+    <div class="column">
+        <h1>Welcome to JADE 2.0!</h1>
+        <h1 id="isMongoDBConnected" hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1>
+    </div>
+</div>