<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><?= __("Request Automatic Approval For This Auction", "auctionforge") ?></p>
        <a href="#" class="bp-btn bp-btn-default bp-btn-sm" id="notRequestedActionBP">
            <?= __("Click Here", "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>

                    <!-- Legal Agreements Section -->
                    <div id="af-legal-agreements-payment" class="af-legal-agreements-container" style="margin-top: 20px;"></div>
                </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 & Conditions", "auctionforge") ?>
                    </h2>
                </header>
                <main class="modal__content bp-mb-3">
                    <!-- Legal Agreements Section -->
                    <div id="af-legal-agreements-terms" class="af-legal-agreements-container"></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>

<!-- Legal Agreements Inline Styles -->
<style>
.af-legal-agreements-container {
    width: 100%;
}
.af-legal-agreement-section {
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.af-legal-agreement-section:last-child {
    margin-bottom: 0;
}
.af-agreement-header {
    background: #f5f6f7;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
    color: #1d2327;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.af-agreement-header .af-version-tag {
    font-weight: 400;
    font-size: 11px;
    color: #888;
}
.af-agreement-scroll-box {
    max-height: 350px;
    overflow-y: auto;
    padding: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #3c434a;
    background: #fff;
    position: relative;
}
.af-legal-agreement-section[data-agreement-type="refund_policy"] .af-agreement-scroll-box,
.af-legal-agreement-section[data-agreement-type="chargeback_waiver"] .af-agreement-scroll-box {
    max-height: 260px;
}
.af-agreement-scroll-box h3,
.af-agreement-scroll-box h4 {
    margin-top: 12px;
    margin-bottom: 6px;
    color: #1d2327;
}
.af-agreement-scroll-box h3 {
    font-size: 16px;
}
.af-agreement-scroll-box h4 {
    font-size: 14px;
}
.af-agreement-scroll-box p {
    margin: 0 0 10px 0;
}
.af-agreement-scroll-box ul,
.af-agreement-scroll-box ol {
    margin: 0 0 10px 20px;
    padding: 0;
}
.af-agreement-scroll-notice {
    padding: 6px 14px;
    background: #fff8e5;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    color: #856404;
    text-align: center;
    transition: opacity 0.3s;
}
.af-agreement-scroll-notice.af-scrolled {
    opacity: 0;
    height: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}
.af-agreement-checkbox {
    padding: 10px 14px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
}
.af-agreement-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #1d2327;
    cursor: pointer;
    line-height: 1.4;
}
.af-agreement-checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.af-agreement-checkbox input[type="checkbox"]:disabled + span {
    color: #999;
}
.af-agreement-checkbox .af-scroll-required {
    font-size: 11px;
    color: #d63638;
    display: block;
    margin-top: 2px;
}
</style>