Feature: Full notification read view with conditional mark-as-read logic

- Added dedicated route and view for reading individual notifications (/account/notifications/read)
- Ensured notification is only marked as read if it hasn't already been
- Updated Notification model to use Subject and Body fields
- Fixed field references in templates (Title → Subject, Message → Body)
- Updated topbar dropdown to use correct field names and display logic
- Gracefully handle "notification not found" cases in template output
- Ensured consistent template parsing with layout and topbar inclusion
- Improved error logging for better diagnosis

templates/account/login.html

@@ -1,10 +1,23 @@
 {{ define "content" }}
 <h2>Login</h2>
-<form method="POST" action="/login">
-    {{ .csrfField }}
-    <label>Username: <input type="text" name="username" required></label><br>
-    <label>Password: <input type="password" name="password" required></label><br>
-    <label><input type="checkbox" name="remember"> Remember Me</label>
-    <button type="submit">Login</button>
+<form method="POST" action="/login" class="form">
+    {{ .CSRFField }}
+
+    <div class="mb-3">
+        <label for="username">Username:</label>
+        <input type="text" name="username" id="username" required class="form-control">
+    </div>
+
+    <div class="mb-3">
+        <label for="password">Password:</label>
+        <input type="password" name="password" id="password" required class="form-control">
+    </div>
+
+    <div class="form-check mb-3">
+        <input type="checkbox" name="remember" id="remember" class="form-check-input">
+        <label for="remember" class="form-check-label">Remember Me</label>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Login</button>
 </form>
 {{ end }}

templates/account/notifications/index.html

@@ -0,0 +1,23 @@
+{{ define "notifications" }}
+<div class="container py-4">
+  <h2 class="mb-4">Notifications</h2>
+
+  {{ if .Notifications }}
+  <ul class="list-group">
+    {{ range .Notifications }}
+    <li class="list-group-item d-flex justify-content-between align-items-start {{ if not .IsRead }}fw-bold{{ end }}">
+      <div class="ms-2 me-auto">
+        <div class="fw-semibold">{{ .Title }}</div>
+        <small class="text-muted">{{ .Message }}</small>
+      </div>
+      {{ if not .IsRead }}
+      <a href="/account/notifications/read?id={{ .ID }}" class="badge bg-primary text-decoration-none">Mark as read</a>
+      {{ end }}
+    </li>
+    {{ end }}
+  </ul>
+  {{ else }}
+  <div class="alert alert-info">You have no notifications.</div>
+  {{ end }}
+</div>
+{{ end }}

templates/account/notifications/read.html

@@ -1,12 +1,13 @@
-{{ define "notifications_read" }}
+{{ define "content" }}
 <div class="container py-4">
-  <h2 class="mb-3">Notification</h2>
-  <div class="card">
-    <div class="card-body">
-      <h5 class="card-title">{{ .Notification.Title }}</h5>
-      <p class="card-text">{{ .Notification.Message }}</p>
-      <a href="/account/notifications" class="btn btn-primary mt-3">Back to Notifications</a>
+  {{ if .Notification }}
+    <h2>{{ .Notification.Subject }}</h2>
+    <p>{{ .Notification.Body }}</p>
+  {{ else }}
+    <div class="alert alert-danger text-center">
+      Notification not found or access denied.
     </div>
-  </div>
+  {{ end }}
+  <a href="/account/notifications" class="btn btn-secondary mt-4">Back to Notifications</a>
 </div>
 {{ end }}

templates/index.html

@@ -1,3 +1,4 @@
 {{ define "content" }}
-
+<h1>Welcome to SynLotto</h1>
+<p>Your trusted lottery platform!</p>
 {{ end }}

templates/topbar.html

@@ -55,8 +55,8 @@
             <div class="d-flex align-items-start">
               <i class="bi bi-info-circle text-primary me-2 fs-4"></i>
               <div>
-                <div class="fw-semibold">{{ $n.Title }}</div>
-                <small class="text-muted">{{ $n.Message }}</small>
+                <div class="fw-semibold">{{ $n.Subject }}</div>
+                <small class="text-muted">{{ $n.Body }}</small>
               </div>
             </div>
           </a>