<script type="text/template" id="approval-info-not-requested-template">
    <div class="bp-notice-block col bp-alert alert bp-alert-danger alert-danger text-center d-flex justify-content-center align-content-center
    align-items-center gap-2 bp-d-flex">
        <% if (auctionInfo.paymentMethodRequired !== undefined && auctionInfo.paymentMethodRequired === true) { %>
        <p><?= __("Credit card Validation Required for Approval", "auctionforge") ?></p>
        <a href="#" class="bp-btn bp-btn-default bp-btn-sm" id="notRequestedActionBP">
            <?= __("Validate Credit Card", "auctionforge") ?>
        </a>
        <% } else if (auctionInfo.paymentMethodRequired !== undefined && auctionInfo.paymentMethodRequired === false) { %>
        <p><?= __("You must receive confirmation to participate in the auction", "auctionforge") ?></p>
        <a href="#" class="bp-btn bp-btn-default bp-btn-sm" id="notRequestedActionTermsBP">
            <?= __("Request approval", "auctionforge") ?>
        </a>
        <% } %>
    </div>
</script>
<script type="text/template" id="approval-info-approval-requested-template">
    <div class="bp-alert alert bp-alert-primary alert-primary" role="alert">
        <?= __("Please wait for the auction house to process your approval request", "auctionforge") ?>
    </div>
</script>
<script type="text/template" id="approval-info-approved-template">
    <div class="bp-alert alert bp-alert-success alert-success" role="alert">
        <?= __("You are approved to bid in this auction", "auctionforge") ?>
    </div>
</script>
<div class="bp-modal modal modal__sale-content micromodal-slide" id="modal-request-approval" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1">
        <div class="modal__overlay__inner" tabindex="-1">
            <div id="modal-request-approval-content" class="modal__container modal__container-2" role="request-approval"
                 aria-modal="true"
                 aria-labelledby="modal-request-approval-title">
                <header class="modal__header bp-d-flex bp-f-wrap bp-f-center bp-mb-2">
                    <h2 class="modal__title modal__title_without-logo" id="modal-request-approval-title"><?= __("Request to bid in auction", "auctionforge") ?></h2>
                    <p class="modal__subtitle bp-mb-0"><?= __("A payment method is required to participate in this auction", "auctionforge") ?></p>
                </header>
                <main id="modal-requestApproval-content" class="modal__content bp-stripe-block2 bp-mb-4">
                    <form id="request-approval-form" class="bp-from">
                        <div class="bp-form-group bp-d-flex bp-f-nowrap bp-row bp-gap-1">
                            <div class="bp-form-group__inner bp-form-wrp-select bp-col bp-basis-66">
                                <select style="width: 100%" name="paymentMethodId" id="payment-methods-list" class="bp-form-control bp-filter-select2"></select>
                            </div>
                            <div class="bp-col bp-basis-33">
                                <button id="addPaymentMethod" data-micromodal-trigger="modal-payment-method" type="button"
                                        class="bp-btn bp-btn-outline-primal bp-btn-xl bp-col bp-w-100">
                                    <?= __("Add payment method", "auctionforge") ?>
                                </button>
                            </div>
                        </div>
                    </form>
                </main>
                <footer class="bp-d-flex bp-f-end bp-gap-1">
                    <button id="closeRequestApprovalAction" data-micromodal-close="modal-request-approval"
                            class="bp-btn bp-btn-outline-default bp-btn-xl">
                        <?= __("Cancel") ?>
                    </button>
                    <button id="requestApprovalAction" type="submit" class="bp-btn bp-btn-default bp-btn-xl">
                        <?= __("Request approval", "auctionforge") ?>
                    </button>
                </footer>
            </div>
        </div>
    </div>
</div>
<div class="bp-modal modal modal__sale-content micromodal-slide" id="modal-request-approval-terms" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1">
        <div class="modal__overlay__inner" tabindex="-1">
            <div id="modal-request-approval-terms-content" class="modal__container modal__container-2" role="request-approval-terms"
                 aria-modal="true"
                 aria-labelledby="modal-request-approval-title">
                <header class="modal__header bp-d-flex bp-f-wrap bp-f-center bp-mb-2">
                    <p class="modal__subtitle bp-mb-0"><?= apply_filters('auction_house_name', get_option('blogname')) ?></p>
                    <h2 class="modal__title modal__title_without-logo" id="modal-request-approval-title">
                        <?= __("Terms of conditions", "auctionforge") ?>
                    </h2>
                </header>
                <main class="modal__content bp-mb-3">
                    <div id="modal-requestApprovalTerms-content" class="modal__content-overflow"></div>
                </main>
                <footer class="bp-d-flex bp-f-end bp-gap-1">
                    <button id="closeRequestApprovalTermsAction" data-micromodal-close="modal-request-approval-terms"
                            class="bp-btn bp-btn-outline-default bp-btn-xl">
                        <?= __("I don't agree", "auctionforge") ?>
                    </button>
                    <button id="requestApprovalTermsAction" type="submit" class="bp-btn bp-btn-default bp-btn-xl">
                        <?= __("I agree", "auctionforge") ?>
                    </button>
                </footer>
            </div>
        </div>
    </div>
</div>