<div class="tab-pane fade" id="paypal-settings">
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center bg-light">
            <h5 class="mb-0">PayPal API Settings</h5>
            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#paypalSettingsModal">
                <i class="bi bi-plus-circle me-1"></i> Add New Configuration
            </button>
        </div>
        <div class="card-body">
            <!-- M-Pesa Configurations List -->
            <div class="table-responsive">
                <table class="table table-hover paypalConfigList w-100" id="paypalConfigList">
                    <thead>
                        <tr>
                            <th>Actions</th>
                            <th>Client ID</th>
                            <th>Tied To (Email)</th>
                            <th>Environment</th>
                            <th>Status</th>
                            <th>Currency</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                    <tbody id="paypalConfigTableBody">
                        <!-- Dynamic content from JS -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>