{{#partial "page"}}
<div class="myAccount-container">
    <div class="myAccount-heading">
        <div class="page-header_container banner-header">
            {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

            <h2 class="page-heading">{{lang 'forms.payment_methods.edit.heading'}}</h2>
        </div>
    </div>
    <div class="myAccount-nav">
        {{> components/account/navigation account_page='payment_methods'}}
    </div>
    <div class="myAccount-body">
        <div class="myAccount-content container">
            {{#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>
    </div>
</div>
{{/partial}}
{{> layout/account}}