{{ define "title" -}}
    {{( pgettext "New Invoice" "title" )}}
{{- end }}

{{ define "breadcrumbs" -}}
    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newInvoicePage*/ -}}
    <nav data-hx-target="main" data-hx-boost="true">
        <p>
            <a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
            <a href="{{ companyURI "/invoices"}}">{{( pgettext "Invoices" "title" )}}</a> /
            <a>{{( pgettext "New Invoice" "title" )}}</a>
        </p>
    </nav>
{{- end }}

{{ define "content" }}
    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.newInvoicePage*/ -}}
    <section id="invoice-dialog-content" data-hx-target="main">
        <h2>{{(pgettext "New Invoice" "title")}}</h2>
        <form enctype="multipart/form-data" method="POST" action="{{ companyURI "/invoices/new" }}"
              data-hx-boost="true"
              data-hx-swap="innerHTML show:false"
        >
            {{ csrfToken }}

            {{ with .Form -}}
                {{ if .RemovedProduct -}}
                    <div role="alert">
                        {{ with .RemovedProduct -}}
                            <p>{{printf (gettext "Product “%s” removed") .Name}}</p>
                            <button type="submit"
                                    formnovalidate
                                    name="action" value="restore-product"
                            >{{( pgettext "Undo" "action" )}}</button>
                            {{ template "hidden-field" .InvoiceProductId }}
                            {{ template "hidden-field" .ProductId }}
                            {{ template "hidden-field" .Name }}
                            {{ template "hidden-field" .Price }}
                            {{ template "hidden-field" .Quantity }}
                            {{ template "hidden-field" .Discount }}
                            {{ template "hidden-field" .Description }}
                            {{ template "hidden-select-field" .Tax }}
                        {{- end }}
                    </div>
                {{- end }}

                <div class="invoice-data">
                    {{ template "select-field" .Customer }}
                    {{ template "input-field" .Date }}
                    {{ template "tags-field" .Tags }}
                    {{ template "select-field" .PaymentMethod }}
                    {{ template "file-field" .File }}
                    {{ template "input-field" .Notes }}
                </div>
                {{- range $product := .Products }}
                    {{ template "invoice-product-form" . }}
                {{- end }}
            {{- end }}

            <table id="invoice-summary">
                <tbody>
                <tr>
                    <th scope="row">{{(pgettext "Subtotal" "title")}}</th>
                    <td class="numeric">{{ .Subtotal | formatPrice }}</td>
                </tr>
                {{- range $tax := .Taxes }}
                    <tr>
                        <th scope="row">{{ index . 0 }}</th>
                        <td class="numeric">{{ index . 1 | formatPrice }}</td>
                    </tr>
                {{- end }}
                <tr>
                    <th scope="row">{{(pgettext "Total" "title")}}</th>
                    <td class="numeric">{{ .Total | formatPrice }}</td>
                </tr>
                </tbody>
            </table>

            <fieldset class="button-bar">
                <button formnovalidate
                        name="action" value="select-products"
                        data-hx-get="{{ companyURI "/invoices/product-form" }}"
                        data-hx-target="#invoice-summary"
                        data-hx-swap="beforebegin show:bottom"
                        data-hx-select="unset"
                        data-hx-vals="js:{index: document.querySelectorAll('.new-invoice-product').length}"
                        type="submit">{{( pgettext "Add products" "action" )}}</button>
                <button formnovalidate
                        id="recompute-button"
                        name="action" value="update"
                        type="submit">{{( pgettext "Update" "action" )}}</button>
                <button class="primary" name="action" value="add"
                        formaction="{{ companyURI "/invoices" }}"
                        type="submit">{{( pgettext "Save" "action" )}}</button>
            </fieldset>
        </form>
    </section>

    <script>
        document.body.addEventListener('recompute', function () {
            document.getElementById('recompute-button').click();
        });
    </script>
{{- end }}