const ui=function(){function populatePlansUI(planType){let html="";const planTypeContainer=document.getElementById("plans-container");dataModel.pricingPlans.forEach((item=>{const{isCustom:isCustom,planTitle:planTitle,planSubtitle:planSubtitle,monthlyPrice:monthlyPrice,annualPrice:annualPrice,featuresPlan:featuresPlan,infoText:infoText,link:link,buttonText:buttonText}=item;let plansSpecificationsHTML="";let infoTextHTML="";let buttonHTML="";if(featuresPlan){featuresPlan.forEach((item=>{plansSpecificationsHTML+=`<p class="feature">${item}</p>`}))}if(link){buttonHTML=!isCustom?`\n                    <a href="${link}" class="flat-button fw-bold text-uppercase">${buttonText}</a>\n                `:`\n                    <button class="flat-button fw-bold text-uppercase" onclick="${link}">${buttonText}</button>\n                `}if(infoText){infoTextHTML+=`<p class="discount-info">${infoText}</p>`}html+=`\n                <div class="features-card">\n                    <p class="features-card-title">${planTitle}</p>\n\n                    <p class="features-card-subtitle">${planSubtitle}</p>\n\n                    <div class="price-section d-flex">\n                        <p class="price">${!isCustom?"$":""}${planType==="annual"?annualPrice:monthlyPrice}</p>\n                                                \n                        ${!isCustom?`<p class="period-type"> / ${planType}</p>`:""}\n                    </div>\n\n                    <div class="features-list">\n                        ${plansSpecificationsHTML}\n                    </div>\n \n                    <div class="learn-more-container">\n                        ${infoTextHTML}\n                        \n                        ${buttonHTML}\n                    </div>\n                </div>\n            `}));if(planTypeContainer){planTypeContainer.innerHTML=html}}return{populatePlansUI:populatePlansUI}}();