Add Comment to Code for Explain

views/dashboard.ejs

-<!-- แสดง Header จาก partial/header.ejs -->
-<%- include('partials/header') %>
-
-<!-- Container หลักของหน้าสมัครสมาชิก -->
-<div class="container my-5" style="max-width: 450px;">
-  <h2 class="text-center mb-4" style="color: #000000; font-weight: bold;">Register</h2>
-
-  <!-- ถ้ามี error (จาก server) ให้แสดงข้อความแจ้งเตือนในกล่องสีแดง -->
-  <% if (error) { %>
-    <div class="alert alert-danger text-center" role="alert" style="font-size: 16px;">
-      <%= error %>
-    </div>
-  <% } %>
-
-  <!-- ฟอร์มสมัครสมาชิก ส่งข้อมูลผ่าน POST ไปยัง /register -->
-  <form action="/register" method="POST" class="shadow p-4 rounded-lg" style="background-color: #F4F7FA;">
-    
-    <!-- ช่องกรอก Username -->
-    <div class="form-group">
-      <label for="username" style="font-weight: bold;">Username:</label>
-      <input type="text" class="form-control" name="username" id="username" placeholder="Enter Username" required>
-    </div>
-
-    <!-- ช่องกรอก Email -->
-    <div class="form-group">
-      <label for="email" style="font-weight: bold;">Email:</label>
-      <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email" required>
-    </div>
-
-    <!-- ช่องกรอก Password -->
-    <div class="form-group">
-      <label for="password" style="font-weight: bold;">Password:</label>
-      <input type="password" class="form-control" name="password" id="password" placeholder="Enter Password" required>
-    </div>
-
-    <!-- ปุ่มกดสมัครสมาชิก -->
-    <button type="submit" class="btn btn-primary btn-block" style="border-radius: 30px; padding: 12px; background-color: #000000; border-color: #000000;">
-      Register
-    </button>
-  </form>
-
-  <!-- ลิงก์ไปหน้า Login หากผู้ใช้มีบัญชีอยู่แล้ว -->
-  <p class="text-center mt-3">
-    Already have an account? <a href="/login" style="color: #000000; font-weight: bold;">Login here</a>
-  </p>
+<%- include('partials/header', { username: username }) %>
+
+<!-- Background color -->
+<div class="container my-5" style="background-color: #a86dcff5; color: #333; border-radius: 0px; padding: 30px;">
+  <!-- Header with Title -->
+  <div class="d-flex justify-content-between align-items-center mb-4">
+    <h2 class="mb-0" style="color: #000000; font-size: 30px; font-weight: 600;">THREAD TOPIC</h2>
+    <a href="/thread/create" class="btn" style="background-color: #000000; color: #fff; font-weight: 600; border-radius: 20px; padding: 10px 20px;">
+      Create New Thread Topic 
+    </a>
+  </div>
+
+  <!-- List Group of Topics -->
+  <div class="list-group">
+    <% threads.forEach(thread => { %>
+      <!-- Topic Item -->
+      <div class="list-group-item mb-4" style="background-color: #FFF; color: #333; border: none; border-radius: 0px; padding: 20px;">
+        <div class="d-flex justify-content-between">
+          <!-- Thread Title -->
+          <h5 class="mb-1" style="font-size: 20px; font-weight: 700;">
+            <a href="/thread/<%= thread.id %>" style="color: #000000; text-decoration: none;">
+              <%= thread.thread_name %>
+            </a>
+          </h5>
+          <!-- Thread Owner -->
+          <small style="color: #999; font-size: 16px;">
+            <span style="color: black; font-weight: bold;">Owner: <%= thread.ownerName %> </span>
+          </small>
+        </div>
+
+        <!-- Short Description -->
+        <p class="mb-3" style="font-size: 15px; line-height: 1.5;">
+          <%= thread.description.length > 100 
+                ? thread.description.substring(0, 100) + '...' 
+                : thread.description 
+          %>
+        </p>
+
+        <!-- Action Buttons (View/Edit/Delete) -->
+        <div class="mt-3">
+          <a href="/thread/<%= thread.id %>" class="btn btn-sm btn-outline-info" style="border-radius: 20px;">View</a>
+          <% if (thread.user_id === userId) { %>
+            <a href="/thread/edit/<%= thread.id %>" class="btn btn-sm btn-outline-warning" style="border-radius: 20px;">Edit</a>
+            <a href="/thread/delete/<%= thread.id %>" 
+               class="btn btn-sm btn-outline-danger" style="border-radius: 20px;"
+               onclick="return confirm('Are you sure you want to delete this thread?');">
+              Delete
+            </a>
+          <% } %>
+        </div>
+      </div>
+    <% }) %>
+  </div>
 </div>
 
-<!-- แสดง Footer จาก partial/footer.ejs -->
 <%- include('partials/footer') %>