(isHovered = true)} onmouseleave={() => (isHovered = false)} > {#if isCurrentPlan}

{isLegacy ? legacyPlanLabel : currentPlanLabel}

{/if} {#if plan.popular && !isCurrentPlan}

{popularLabel}

{/if}

{plan.name}

{plan.monthlyMana}

{perMonthLabel}

{formatPrice(plan)}

{plan.billingCycle === 'yearly' ? perYearLabel : perMonthLabel}

{#if plan.billingCycle === 'yearly' && plan.monthlyEquivalent}

({plan.monthlyEquivalent.toFixed(2).replace('.', ',')}€{monthlyEquivalentLabel})

{/if}

{#if !plan.id.toLowerCase().includes('free')} onSelect(plan.id)} iconName={isCurrentPlan ? 'checkmark-circle-outline' : 'arrow-forward-outline'} variant={isCurrentPlan ? 'secondary' : plan.popular ? 'accent' : 'primary'} disabled={isCurrentPlan} /> {/if}