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

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

{{ define "content" }}
    {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.PaymentMethodsPage*/ -}}
    <section data-hx-target="main" data-hx-swap="innerHTML show:false">
        <h2>{{ template "title" . }}</h2>
        <table>
            <thead>
            <tr>
                <th>{{( pgettext "Default" "title" )}}</th>
                <th>{{( pgettext "Payment Method" "title" )}}</th>
                <th>{{( pgettext "Instructions" "title" )}}</th>
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody data-hx-target="closest tr" data-hx-swap="outerHTML">
            {{ with .PaymentMethods }}
                {{- range . }}
                    {{- block "row" . }}
                        {{ $confirm := ( gettext "Are you sure?" )}}
                        <tr>
                            <td>
                                <span class="description-text"></span>
                                <input type="radio"
                                       form="default_payment_form"
                                       aria-label="{{ pgettext "Set as default" "action" }}"
                                       name="default_payment_id"
                                       value="{{ .Id }}"
                                        {{ if .IsDefault }} checked{{ end}}
                                >
                            </td>
                            <td>{{ .Name }}</td>
                            <td>{{ .Instructions }}</td>
                            <td>
                                <a href="{{ companyURI "/payment-methods"}}/{{ .Id }}/edit"
                                   aria-label="{{( gettext "Edit payment method" )}}"
                                   data-hx-boost="true"
                                   data-hx-push-url="false"
                                ><i class="ri-edit-2-line"></i></a>
                            </td>
                            <td>
                                <form method="POST" action="{{ companyURI "/payment-methods"}}/{{ .Id }}"
                                      data-hx-boost="true"
                                      data-hx-confirm="{{ $confirm }}"
                                      data-hx-swap="outerHTML swap:1s"
                                >
                                    {{ csrfToken }}
                                    {{ deleteMethod }}
                                    <button class="icon" aria-label="{{( gettext "Delete payment method" )}}"
                                    ><i class="ri-delete-back-2-line"></i></button>
                                </form>
                            </td>
                        </tr>
                    {{- end }}
                {{- end }}
            {{ else }}
                <tr>
                    <td colspan="5">{{( gettext "No payment methods added yet." )}}</td>
                </tr>
            {{ end }}
            </tbody>
            {{ if gt (len .PaymentMethods) 1 -}}
                <tfoot>
                <tr>
                    <td>
                        <form id="default_payment_form"
                              method="POST"
                              action="{{ companyURI "/payment-methods" }}/default"
                              data-hx-boost="true"
                        >
                            {{ csrfToken }}
                            {{ putMethod }}
                            {{ if .UpdateDefaultError -}}
                                <p>{{ .UpdateDefaultError}}</p>
                            {{- end }}
                            <button>{{( pgettext "Set" "action")}}</button>
                        </form>
                    </td>
                    <td colspan="4"></td>
                </tr>
                </tfoot>
            {{- end }}
        </table>

        <form method="POST" action="{{ companyURI "/payment-methods" }}" data-hx-boost="true">
            <h3>{{( pgettext "New Payment Method" "title")}}</h3>
            <fieldset>
                {{ csrfToken }}
                {{ with .Form -}}
                    {{ template "input-field" .Name }}
                    {{ template "input-field" .Instructions }}
                {{- end }}
            </fieldset>
            <footer>
                <button>{{( pgettext "Add new payment method" "action" )}}</button>
            </footer>
        </form>
    </section>
{{- end }}