{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/invoice.invoiceProductForm*/ -}}
<fieldset class="new-invoice-product"
          data-hx-select="unset"
          data-hx-vals='{"index": {{ .Index }}}'
          data-hx-include="[name='product.quantity.{{ .Index }}']"
>
    <button type="submit" class="icon delete-product"
            formnovalidate
            name="action" value="remove-product.{{ .Index }}"
            aria-label="{{( gettext "Delete product from invoice" )}}"
    ><span class="sr-only">{{( pgettext "Remove" "action" )}}</span></button>
    {{ with .InvoiceProductId }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
    {{ with .ProductId }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
    {{ with .Name -}}
        <label>
            {{( pgettext "Name" "input" )}}<br>
            <input type="text"
                   required
                   name="{{ .Name }}"
                   value="{{ .Val }}"
                   autocomplete="off"
                    {{ template "error-attrs" . }}
            ><br>
            {{ template "error-message" . }}
        </label>
    {{- end }}
    {{ with .Price -}}
        <label>
            {{( pgettext "Price" "input" )}}<br>
            <input type="number"
                   required
                   name="{{ .Name }}"
                   value="{{ .Val }}"
                   data-hx-on="change: this.dispatchEvent(new CustomEvent('recompute', {bubbles: true}))"
                   min="0"
                   step="0.01"
                    {{ template "error-attrs" . }}
            ><br>
            {{ template "error-message" . }}
        </label>
    {{- end }}
    {{ with .Quantity -}}
        <label>
            {{( pgettext "Quantity" "input" )}}<br>
            <input type="number"
                   required
                   name="{{ .Name }}"
                   value="{{ .Val }}"
                   data-hx-on="change: this.dispatchEvent(new CustomEvent('recompute', {bubbles: true}))"
                   min="0"
                    {{ template "error-attrs" . }}
            ><br>
            {{ template "error-message" . }}
        </label>
    {{- end }}
    {{ with .Discount -}}
        <label>
            {{( pgettext "Discount (%)" "input" )}}<br>
            <input type="number"
                   required
                   name="{{ .Name }}"
                   value="{{ .Val }}"
                   data-hx-on="change: this.dispatchEvent(new CustomEvent('recompute', {bubbles: true}))"
                   min="0"
                   max="100"
                    {{ template "error-attrs" . }}
            ><br>
            {{ template "error-message" . }}
        </label>
    {{- end }}
    {{ with .Tax -}}
        <label>
            {{( pgettext "Taxes" "input" )}}<br>
            <select name="{{ .Name }}"
                    {{ template "error-attrs" . }}
                    required
                    data-hx-on="change: this.dispatchEvent(new CustomEvent('recompute', {bubbles: true}))"
            >
                <option value="">{{( gettext "Select a TAX" )}}</option>
                {{ template "list-options" . }}
            </select><br>
            {{ template "error-message" . }}
        </label>
    {{- end }}
</fieldset>