<script type="text/template" id="payment-methods-template">
    <div class="profile-container">
        <div class="bp-form-group bp-mb-30">
            <div id="section-payment-method-list"></div>
        </div>
        <div class="bp-form-group bp-mb-30">
            <button id="addPaymentMethod" type="submit" class="bp-btn bp-btn-black">
                <?= __("Add payment method", "auctionforge") ?>
            </button>
        </div>
    </div>
</script>
<script type="text/template" id="payment-methods-list-template">
    <table class="bp-table">
        <% if (data !== undefined && data.length > 0) { %>
        <tr>
            <th><?= __("Company", "auctionforge") ?></th>
            <th><?= __("Expiration", "auctionforge") ?></th>
            <th><?= __("Number", "auctionforge") ?></th>
            <th></th>
        </tr>
        <% _.forEach(data, function(method, index) { %>
        <tr class="bp-method-row" data-id="<%- method.id %>">
            <td><%- method.company %></td>
            <td><%- method.expiration %></td>
            <td><%- method.number %></td>
            <td><a title="<?= __("Delete") ?>" class="bp-method-delete" href="#"><svg class="bp-icon"><use xlink:href="#delete"></use></svg></a></td>
        </tr>
        <% }); %>
        <% } %>
    </table>
</script>
<div class="bp-modal modal modal__sale-content micromodal-slide" id="modal-payment-method" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1">
        <div class="modal__overlay__inner" tabindex="-1">
            <div id="modal-payment-method-wrp" class="modal__container modal__container-2" role="payment-method"
                 aria-modal="true"
                 aria-labelledby="modal-payment-method-title">
                <header class="modal__header bp-mb-3">
                    <h2 class="modal__title modal__title_without-logo" id="modal-payment-method-title"><?= __("Add payment method", "auctionforge") ?></h2>
                </header>
                <main id="modal-payment-method-content" class="modal__content bp-stripe-block bp-pay-trace-block bp-mb-4">
                    <form id="stripePaymentElement" class="payment-form <?= apply_filters('bp_hidden_class', 'hidden') ?>">
                        <div class="bs-loader-small"></div>
                    </form>
                    <form id="payTracePaymentElement" class="payment-form <?= apply_filters('bp_hidden_class', 'hidden') ?>">
                        <div class="bs-loader-small"></div>
                    </form>
                </main>
                <footer class="bp-d-flex bp-f-end bp-f-item-start bp-gap-1 hidden">
                    <button id="closePaymentMethodAction" data-micromodal-close="modal-payment-method"
                            class="bp-btn bp-btn-outline-default bp-btn-xl"><?= __("Cancel") ?></button>
                    <button id="addPaymentMethodAction" type="submit" class="bp-btn bp-btn-default bp-btn-xl"><?= __("Save") ?></button>
                </footer>
            </div>
        </div>
    </div>
</div>
