feat: Begins vendor views, working form, and table. Styles need some updates.

Resources/Views/home.leaf

@@ -31,12 +31,21 @@
                Employees
             </a>
           </li>
+          <li>
+            <a hx-get="/vendors?branches=true"
+               hx-target="body"
+               hx-push-url="true"
+               >
+              Vendors
+            </a>
+          </li>
         </ul>
       </nav>
       </div>
-      <div id="home-content" class="container">
-        <p>We're in!</p>
-      </div>
+      #import("homeContent")
+      <!-- <div id="home-content" class="container"> -->
+      <!--   <p>We're in!</p> -->
+      <!-- </div> -->
     </section>
   </div>
   #endexport

Resources/Views/htmx-form.leaf

@@ -4,7 +4,7 @@
       #endif
       #if(htmxPostTargetUrl):
       hx-post="#(htmxPostTargetUrl)"
-      #else:
+      #elseif(htmxPutTargetUrl):
       hx-put="#(htmxPutTargetUrl)"
       #endif
       hx-target="#(htmxTarget)"

Resources/Views/vendor-form.leaf

@@ -1,9 +1,11 @@
-<form hx-post="/vendors">
+#extend("htmx-form", htmxForm):
+  #export("formBody"):
   <input type="hidden"
          id="vendorId"
          name="id"
-         #if(vendor.id):
-         value="#(vendor.id)"
+         #if(context.vendor.id):
+         value="#(context.vendor.id)"
+         #endif
          >
 
   <input type="text"
@@ -12,9 +14,22 @@
          placeholder="Vendor Name"
          autofocus
          required
-         #if(vendor.name):
-         value="#(vendor.name)"
+         #if(context.vendor.name):
+         value="#(context.vendor.name)"
          #endif
          >
-  <input type="submit" value="#(buttonLabel)">
-</form>
+  <br>
+  <input type="text"
+         id="branches"
+         name="branches"
+         #if(context.branches):
+         value="#(context.branches)"
+         #endif
+         placeholder="Monroe, Dayton..."
+         >
+  <br>
+  <input type="submit" value="#(context.buttonLabel)">
+  <br>
+  <p><small>Mutliple branches can be specified separated by a comma.</small></p>
+  #endexport
+#endextend

Resources/Views/vendor-table.leaf

@@ -0,0 +1,34 @@
+<table id="vendor-table">
+  <tr>
+    <th>Name</th>
+    <th>Branches</th>
+    <th></th>
+  </tr>
+  <tbody id="vendor-table-body">
+    #for(vendor in vendors):
+    <tr id="vendor_#(vendor.id)">
+      <td>#capitalized(vendor.name)</td>
+      <td>
+        #if(vendor.branches):
+        <ul>
+          #for(branch in vendor.branches):
+          <li>#capitalized(branch.name)</li>
+          #endfor
+        </ul>
+        #endif
+      </td>
+      <!-- TODO: Add edit button -->
+      <td>
+        <a class="btn btn-delete"
+           hx-delete="/vendors/#(vendor.id)"
+           hx-target="closest tr"
+           hx-swap="outerHTML swap:0.5s"
+           hx-confirm="Are you sure you want to delete this vendor?"
+           >
+          <img src="images/trash-can.svg" alt="Delete">
+        </a>
+      </td>
+    </tr>
+    #endfor
+  </tbody>
+</table>

Resources/Views/vendors.leaf

@@ -0,0 +1,14 @@
+#extend("home"):
+  #export("homeContent"):
+  <div id="home-content" class="container">
+    <div class="container">
+      <h1>Vendors</h1>
+      <br>
+      <p>Vendors are who purchase orders can be issued for, they consist of multiple branches / locations.</p>
+      <br>
+      #extend("vendor-form", form)
+      #extend("vendor-table")
+    </div>
+  </div>
+  #endexport
+#endextend