Add delete button to remove a product from the invoice form

With this button, it is no longer necessary to set the quantity to zero
to remove, at least not with JavaScript.  This is why i am using Alpine:
to use x-cloak and hide it from non-JavaScript users.

Although, i wonder if it would not be better to use HTMx for that?

web/static/numerus.css

@@ -567,8 +567,15 @@ main > nav {
 }
 
 .new-invoice-product {
-  display: grid;
+    display: grid;
-  grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+    position: relative;
+}
+
+.new-invoice-product .delete-product {
+    position: absolute;
+    right: 0;
+    top: .75rem;
 }
 
 .new-invoice-product .input:nth-of-type(5) {

web/template/form.gohtml

@@ -145,10 +145,15 @@
 {{ define "invoice-product-form" -}}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.invoiceProductForm*/ -}}
     <fieldset class="new-invoice-product"
+              x-data="{removeProduct() { $el.remove(); document.getElementById('recompute-button').click(); }}"
               data-hx-select="unset"
               data-hx-vals='{"index": {{ .Index }}}'
               data-hx-include="[name='product.quantity.{{ .Index }}']"
     >
+        <button x-cloak type="button" class="icon delete-product"
+                @click="removeProduct()"
+                aria-label="{{( gettext "Delete product from invoice" )}}"
+        ><i class="ri-delete-back-2-line"></i></button>
         {{ template "hidden-field" .InvoiceProductId }}
         {{ template "hidden-field" .ProductId }}
         {{ template "input-field" .Name }}