{{ define "title" -}}
    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.PaymentAccountForm*/ -}}
    {{( pgettext "New Payment Account" "title" )}}
{{- end }}

{{ define "breadcrumbs" -}}
    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.PaymentAccountForm*/ -}}
    <nav data-hx-target="main" data-hx-boost="true">
        <p>
            <a href="{{ companyURI "/" }}">{{( pgettext "Home" "title" )}}</a> /
            <a href="{{ companyURI "/payment-accounts"}}">{{( pgettext "Payment Accounts" "title" )}}</a> /
            <a>{{( pgettext "New Payment Account" "title" )}}</a>
        </p>
    </nav>
{{- end }}

{{ define "content" }}
    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.PaymentAccountForm*/ -}}
    <section data-hx-target="main">
        <h2>{{ template "title" . }}</h2>
        <form method="POST" action="{{ companyURI "/payment-accounts" }}"
              data-hx-swap="innerHTML show:false"
              data-hx-boost="true"
              x-data="{type: '{{ .Type.Selected }}'}"
        >
            {{ csrfToken }}

            {{ template "radio-field" .Type }}
            {{ template "input-field" .Name }}
            <template x-if="type === 'bank'">
                {{ template "input-field" .IBAN }}
            </template>
            <template x-if="type === 'card'">
                {{ template "input-field" .LastFourDigits }}
            </template>
            <template x-if="type === 'card'">
                {{ template "input-field" .ExpirationMonthYear }}
            </template>

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