feat: working on detail views.

Resources/Views/employees/detail.leaf

@@ -0,0 +1,63 @@
+<div id="employee-detail" class="float" #if(!employee): style="display:none;" #endif>
+  #if(employee):
+    <button class="closebtn"
+            hx-get="/employees"
+            hx-target="body"
+            hx-push-url="true"
+            hx-swap="outerHTML"
+            hx-disable-elt="this"
+            >
+    &times;
+  </button>
+  <form hx-put="/employees/#(employee.id)"
+        hx-target="#employee_#(employee.id)"
+        hx-swap="outerHTML"
+        hx-disable-elt="this"
+        hx-on::after-request="window.location.href='/employees'; toggleContent('employee-detail');"
+        >
+    <table>
+      <tbody>
+        <tr>
+          <td style="width: 20%;"><h3 class="label">First Name:</h3></td>
+          <td><input type="text" name="firstName" value="#(employee.firstName)"></td>
+        </tr>
+        <tr>
+          <td><h3 class="label">Last Name:</h3></td>
+          <td><input type="text" name="lastName" value="#(employee.lastName)"></td>
+        </tr>
+        <tr>
+          <td><h3 class="label">Active:</h3></td>
+          <td>
+            #if(employee.active):
+            <a class="toggle"
+               hx-patch="/employees/#(id)/toggle-active"
+               hx-target="#employee_#(id)"
+               hx-swap="outerHTML"
+               >
+              <img class="toggle" src="/images/toggle-on.svg" alt="Active">
+            </a>
+            #else:
+            <a class="toggle"
+               hx-patch="/employees/#(id)/toggle-active"
+               hx-target="#employee_#(id)"
+               hx-swap="outerHTML"
+               >
+              <img class="toggle" src="/images/toggle-off.svg" alt="Active">
+            </a>
+            #endif
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="btn-row">
+      <button class="edit"
+              type="submit"
+              hx-swap="outerHTML"
+              >
+        Update
+      </button>
+      <button class="danger">Delete</button>
+    </div>
+  </form>
+  #endif
+</div>