<div class="table table_payment"><!--class of invalid-card can be injected here-->
    <div class="table__content">
        <div class="row">
            <div class="col">
                {{#if paypal}}
                    <div class="table__content-heading">Payment details</div>
                    <div class="pt-4">
                        <a href="https://www.paypal.com/uk/webapps/mpp/paypal-popup" title="How PayPal Works"><img
                                src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png" border="0"
                                alt="PayPal Logo" class="paypal-logo"></a>
                    </div>
                    <div class="pt-3">
                        {{p-email}}
                    </div>
                {{/if}}

                {{#if klarna}}
                    <div class="table__content-heading">Payment details</div>
                    <div class="pt-4">
                        <div class="klarna-logo-img">
                            <img src="./img/klarna.svg" alt="klarna">
                        </div>
                    </div>
                {{/if}}

                {{#if number.length}}
                    <div class="table__content-heading">Payment card</div>
                    <p class="mb-0">{{number}}</p>
                    <p class="mb-0">{{type}}</p>
                    <p class="mb-0">{{expiration}}</p>
                {{/if}}
            </div>
            {{#if address}}
            <div class="col">
                <div class="table__content-heading">Billing address</div>
                {{{address}}}
            </div>
            {{/if}}
        </div>
    </div>
    <div class="table__actions">
        <button class="btn btn-secondary">
        <span class="btn__text">
          <span class="icon"><span class="fas fa-trash"></span></span>
            Remove
        </span>
        </button>
        {{> radiobutton label="Set as default" name="payment-details-radio" id="@index" checked=isDefault}}
    </div>

    {{#if isDeleted}}
        <div class="col-12 pl-0 pr-0">
            <div class="user-address__delete">
                <p class="delete-heading">Delete this payment card?</p>
                <button class="btn btn-secondary">
                    <span class="btn__text">Cancel</span>
                </button>
                <button class="btn btn-primary">
                    <span class="btn__text">Yes, delete</span>
                </button>
                <p class="delete-warning">You will not be able to undo this action</p>
            </div>
        </div>
    {{/if}}
</div>
