feat: working on detail views.

Resources/Views/users/detail.leaf

@@ -0,0 +1,36 @@
+<div id="user-detail" class="float" #if(!user): style="display:none;" #endif>
+  #if(user):
+    <button class="closebtn"
+            hx-get="/users"
+            hx-target="body"
+            hx-push-url="true"
+            hx-swap="outerHTML"
+            hx-disable-elt="this"
+            >
+    &times;
+  </button>
+  <table>
+    <tbody>
+      <tr>
+        <td class="label"><h3>Username:</h3></td>
+        <td><h3>#(user.username)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Email:</h3></td>
+        <td><h3>#(user.email)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Created:</h3></td>
+        <td><h3>#date(user.createdAt, "MM-dd-yyyy")</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Updated:</h3></td>
+        <td><h3>#date(user.updatedAt, "MM-dd-yyyy")</h3></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="btn-row user-buttons">
+    <button class="danger">Delete</button>
+  </div>
+  #endif
+</div>

Resources/Views/users/index.leaf

@@ -7,9 +7,11 @@
       <p>Users are people that can login and generate puchase orders for employees.</p>
       <br>
     </div>
+    #extend("users/detail")
     #extend("form-container"): #export("formContent"):
       #extend("users/form", form)
     #endexport #endextend
+
     #extend("users/table")
   </div>
   #endexport

Resources/Views/users/table-row.leaf

@@ -0,0 +1,14 @@
+<tr id="user_#(id)">
+  <td>#(username)</td>
+  <td>#(email)</td>
+  <td style="width: 50px;">
+    <button hx-get="/users/#(id)"
+            hx-target="#user-detail"
+            hx-swap="outerHTML swap:0.5s"
+            hx-push-url="true"
+            class="btn btn-detail"
+            >
+      &rsaquo;
+    </button>
+  </td>
+</tr>

Resources/Views/users/table.leaf

@@ -8,20 +8,7 @@
   </thead>
   <tbody>
     #for(user in users):
-    <tr id="user_#(user.id)">
-      <td>#(user.username)</td>
-      <td>#(user.email)</td>
-      <td style="width: 50px;">
-        <a class="btn btn-delete"
-           hx-delete="/users/#(user.id)"
-           hx-target="#user-table"
-           hx-swap="outerHTML"
-           hx-confirm="Are you sure you want to delete this user?"
-           >
-          <img src="images/trash-can.svg" alt="Delete">
-        </a>
-      </td>
-    </tr>
+      #extend("users/table-row", user)
     #endfor
   </tbody>
 </table>