{{ define "title" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/invoice.invoiceForm*/ -}}
    {{- if .Slug }}
        {{ printf ( pgettext "Edit Invoice “%s”" "title" ) .Number }}
    {{- else -}}
        {{( pgettext "New Invoice" "title" )}}
    {{- end -}}
{{- end }}

{{ define "head" -}}
    <script src="/static/idiomorph-ext@0.3.0.min.js"></script>
{{- end }}

{{ define "breadcrumb" -}}
    <li><a href="./">{{( pgettext "Invoices" "title" )}}</a></li>
{{- end }}

{{ define "content" }}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/invoice.invoiceForm*/ -}}
    <section id="invoice-dialog-content" data-hx-target="main">
        <h2>{{ template "title" . }}</h2>
        <form id="invoice-form"
              method="POST"
                {{ if .Slug }} action="/admin/invoices/{{ .Slug }}/edit" {{ else }} action="/admin/invoices/new" {{ end }}
              data-hx-boost="true"
              data-hx-ext="morph"
              data-hx-swap="morph:innerHTML show:false"
        >
            {{ CSRFInput }}
            {{ with .BookingID }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}

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

            <fieldset class="invoice-data">
                {{ with .Date -}}
                    <label>
                        {{( pgettext "Invoice date" "input" )}}<br>
                        <input type="date"
                               required
                               name="{{ .Name }}"
                               value="{{ .Val }}"
                                {{ template "error-attrs" . }}
                        ><br>
                        {{ template "error-message" . }}
                    </label>
                {{- end }}
                {{ with .InvoiceStatus }}
                    {{ if $.Slug -}}
                        <label>
                            {{( pgettext "Invoice status" "input" )}}<br>
                            <select name="{{ .Name }}"
                                    required
                                    {{ template "error-attrs" . }}
                            >
                                {{ template "list-options" . }}
                            </select><br>
                            {{ template "error-message" . }}
                        </label>
                    {{- else -}}
                        <input type="hidden" name="{{ .Name }}" value="{{ .String }}">
                    {{- end }}
                {{- end }}
                {{ with .Notes -}}
                    <label>
                        {{( pgettext "Notes (optional)" "input" )}}<br>
                        <textarea name="{{ .Name }}"
                                  rows="2"
                                {{ template "error-attrs" . }}
                        >{{ .Val }}</textarea><br>
                        {{ template "error-message" . }}
                    </label>
                {{- end }}
            </fieldset>

            {{ template "contact.gohtml" .Customer }}

            <h3>{{( pgettext "Products" "title" )}}</h3>
            {{- range .Products }}
                {{ template "product-form.gohtml" . }}
            {{- 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="/admin/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"
                        {{ if .Slug }} formmethod="put" formaction="/admin/invoices/{{ .Slug }}" {{ else }} formaction="/admin/invoices" {{ end }}
                        type="submit">{{( pgettext "Save" "action" )}}</button>
            </fieldset>
        </form>
    </section>

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