feat: Working purchase order table and form.

Resources/Views/vendors/table.leaf

@@ -1,24 +1,39 @@
 <table id="vendor-table">
-  <tr>
-    <th>Name</th>
-    <th>Branches</th>
-    <th></th>
-  </tr>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Branches</th>
+      <th>#extend("btn/toggle-form")</th>
+    </tr>
+  </thead>
   <tbody id="vendor-table-body">
     #for(vendor in vendors):
     <tr id="vendor_#(vendor.id)">
       <td>#capitalized(vendor.name)</td>
-      <td>
+      <td class="vendor-branches">
         #if(vendor.branches):
         <ul>
           #for(branch in vendor.branches):
-          <li>#capitalized(branch.name)</li>
+          <li style="list-style-type: none; margin-left: 10px;">
+            <div class="branch-row">
+              <div class="branch-name">#capitalized(branch.name)</div>
+              <a href="javascript:void(0)"
+                 class="btn danger"
+                 hx-delete="/api/v1/vendors/#(vendor.id)/branches/#(branch.id)"
+                 hx-confirm="Are you sure you want to delete this branch?"
+                 hx-target="closest li"
+                 hx-swap="outerHTML swap:0.3s"
+                 >
+                 &times;
+              </a>
+            </div>
+          </li>
           #endfor
         </ul>
         #endif
       </td>
       <!-- TODO: Add edit button -->
-      <td>
+      <td style="width: 50px;">
         <a class="btn btn-delete"
            hx-delete="/vendors/#(vendor.id)"
            hx-target="closest tr"