{{ define "title" -}}
    {{printf (pgettext "Edit Product “%s”" "title") .Name }}
{{- end }}

{{ define "content" }}
    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.productForm*/ -}}
    <nav>
        <p>
            <a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
            <a href="{{ companyURI "/products"}}">{{( pgettext "Products" "title" )}}</a> /
            <a>{{ .Name }}</a>
        </p>
    </nav>
    <section class="dialog-content">
        <h2>{{printf (pgettext "Edit Product “%s”" "title") .Name }}</h2>
        <form method="POST">
            {{ csrfToken }}
            {{ putMethod }}

            {{ template "input-field" .Name | addInputAttr "autofocus" }}
            {{ template "input-field" .Description }}
            {{ template "input-field" .Price }}
            <div x-data="{
                options: [],
                open: false,
                init() {
                    const wrap = $el.querySelector('.input');
                    const select = wrap.querySelector('select');
                    for (const option of select.options) {
                        this.options.push({
                            value: option.value,
                            label: option.innerText,
                            selected: option.getAttribute('selected') !== null,
                        }); 
                    }
                    wrap.remove();
                }
            }">
                <div x-cloak>
                    {{ template "select-field" .Tax }}
                </div>
                {{ with .Tax }}
                    <template x-if="true">
                        <div class="input multiselect {{ if .Errors }}has-errors{{ end }}">
                            <ul class="tags" :class="{'empty': options.filter(option => option.selected).length === 0}"
                                @click="open = !open" @click.away="open = false">
                                <template x-for="(option) in options.filter(option => option.selected)">
                                    <li>
                                        <input type="hidden" name="{{ .Name }}" :value="option.value">
                                        <span x-text="option.label"></span>
                                        <button type="button" @click.stop="option.selected = false">×</button>
                                    </li>
                                </template>
                            </ul>
                            <span class="placeholder">{{ .Label }}</span>
                            <ul class="options" x-show.transition="open">
                                <template x-for="(option) in options.filter(option => !option.selected)">
                                    <li
                                            x-text="option.label"
                                            @click.stop="option.selected = true"
                                    ></li>
                                </template>
                            </ul>
                            {{- if .Errors }}
                                <ul>
                                    {{- range $error := .Errors }}
                                        <li>{{ . }}</li>
                                    {{- end }}
                                </ul>
                            {{- end }}
                        </div>
                    </template>
                {{ end }}
            </div>

            <fieldset>
                <button class="primary" type="submit">{{( pgettext "Update product" "action" )}}</button>
            </fieldset>
        </form>
    </section>
{{- end }}