{{#partial "page"}}

    {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

    <h2 class="page-heading">{{lang 'forms.payment_methods.edit.heading'}}</h2>

    {{> components/account/navigation account_page='payment_methods'}}

    <div class="account account--fixed">
        {{#if forms.error}}
            {{> components/common/alert/alert-error forms.error}}
        {{/if}}

        {{#with customer.edit_stored_instrument}}
            <form action="{{forms.action}}" data-address-form class="form" method="post">
                <input type="hidden" name="token" value="{{token}}">
                <input type="hidden" name="currency_code" value="{{../currency_selector.active_currency_code}}">
                <input type="hidden" name="type" value="{{type}}">

                <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_method'}}</h3>

                <div class="paymentMethodForm">
                    {{#if type '===' 'stored_card'}}
                        <dl class="paymentMethodForm-details">
                            <dt class="paymentMethodForm-details-term">{{lang 'account.payment_methods.credit_card_number'}}</dt>
                            <dd class="paymentMethodForm-details-description">**** **** **** {{last_4}}</dd>
                        </dl>
                        <dl class="paymentMethodForm-details">
                            <dt class="paymentMethodForm-details-term">{{lang 'account.payment_methods.expiration'}}</dt>
                            <dd class="paymentMethodForm-details-description">{{expiry_month}}/{{expiry_year}}</dd>
                        </dl>
                    {{/if}}
                    {{#if type '===' 'stored_paypal_account'}}
                        <div class="form-field">
                            <h3 class="paymentMethodForm-heading">
                                {{lang 'account.payment_methods.paypal'}} {{lang 'common.account'}}
                            </h3>
                            <p>
                                {{email}}
                            </p>
                        </div>
                    {{/if}}
                    <div class="form-field">
                        <input type="checkbox" value="default_instrument" name="is_default" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox" {{#if is_default}}checked{{/if}}>
                        <label class="form-label" for="default_instrument">{{lang 'forms.payment_methods.default_instrument'}}</label>
                        <input type="checkbox" value="default_instrument" name="default_instrument" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox" {{#if customer.payment_methods.selected_payment_method.default_instrument}}checked{{/if}}>
                    </div>
                </div>

                {{#if type '===' 'stored_card'}}
                    <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_address'}}</h3>

                    <fieldset class="form-fieldset">
                        <div class="form-row form-row--half">
                            {{#each forms.billing_fields}}
                                {{{dynamicComponent 'components/common/forms'}}}
                            {{/each}}
                        </div>
                    </fieldset>
                {{/if}}
                <div class="form-actions">
                    <input type="submit" class="button button--primary" value="{{lang 'forms.payment_methods.submit_value'}}">
                    <a href="{{../urls.account.payment_methods.all}}" class="button">{{lang 'common.cancel'}}</a>
                    {{inject 'required' (lang 'common.required')}}
                    {{inject 'state_error' (lang 'errors.state_error')}}
                </div>
            </form>
        {{/with}}
    </div>
{{/partial}}
{{> layout/base}}
