frontend: add tableview to display added monsters

templates/main.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="card-body form-box w-4/5 h-full">
+<div class="card-body form-box w-full h-full">
   <h2 class="card-title">Monster Form</h2>
   <form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
     <table>
@@ -10,7 +10,9 @@
       </tr>
     </table>
     <div class="grid grid-cols-1">
-      <button type="button" hx-post="/addMonster" class="btn">Add Monster</button>
+      <button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML"
+        class="btn">Add
+        Monster</button>
     </div>
     {{ template "monsterform" . }}
     <input type="hidden" name="filename" value="{{.Filename}}">
@@ -19,4 +21,47 @@
     </div>
   </form>
 </div>
+<div class="card-body form-box w-full h-full">
+  <h2 class="card-title">Existing Monsters</h2>
+  <table class="table">
+    <colgroup>
+      <col style="width: 100px;">
+      <col style="width: 100px;">
+    </colgroup>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Source</th>
+        <th>Size</th>
+        <th>Type</th>
+        <th>Alignment</th>
+        <th>AC</th>
+        <th>AC Form</th>
+        <th>HP Average</th>
+        <th>HP Formula</th>
+        <th>Speed</th>
+        <th>Str</th>
+        <th>Dex</th>
+        <th>Con</th>
+        <th>Int</th>
+        <th>Wis</th>
+        <th>Cha</th>
+        <th>Save Dex</th>
+        <th>Save Con</th>
+        <th>Savve Wis</th>
+        <th>Perception</th>
+        <th>Stealth</th>
+        <th>Damage Resistance</th>
+        <th>Senses</th>
+        <th>Languages</th>
+        <th>CR</th>
+        <th>Trait Name</th>
+        <th>Trait Entry</th>
+        <th>Action Name</th>
+        <th>Action Entry</th>
+      </tr>
+    </thead>
+    {{ template "monsterTable" }}
+  </table>
+</div>
 {{ end }}