mixin features_premium li   li strong #{translate('all_premium_features')} li #{translate('sync_dropbox_github')} li #{translate('full_doc_history')} li #{translate('track_changes')} li + #{translate('more').toLowerCase()} mixin gen_localized_price_for_plan_view(plan, view) span #{settings.localizedPlanPricing[recommendedCurrency][plan][view]} mixin plans_v2_table(period, config) - var baseColspan = config.baseColspan || 1 - var maxColumn = config.maxColumn || 4 - var discountedColumn = config.discountedColumn || {} tr(class=`cols-${maxColumn}`) th(colspan=baseColspan) - for (var i = 0; i < maxColumn; i++) - var tableHeadKey = Object.keys(config.tableHead)[i] - var tableHeadOptions = Object.values(config.tableHead)[i] || {} - var colspan = tableHeadOptions.colspan || baseColspan - var highlighted = i === config.highlightedColumn.index - var discountHighlighted = i === discountedColumn.index - var eventTrackingKey = config.eventTrackingKey - var additionalEventSegmentation = config.additionalEventSegmentation || {} - if (discountHighlighted) { var thClass = 'plans-v2-table-discount-highlighted' } else if (highlighted) { var thClass = 'plans-v2-table-green-highlighted' } else if (i === config.highlightedColumn.index - 1) { var thClass = 'plans-v2-table-cell-before-green-highlighted-column' } else { var thClass = '' } th( class=thClass colspan=colspan ) .plans-v2-table-th if (discountHighlighted) p.plans-v2-table-discount-highlighted-text #{translate(config.discountedColumn.text[period]).toUpperCase()} if (highlighted) p.plans-v2-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()} case tableHeadKey when 'individual_free' +table_head_individual_free(highlighted, period) when 'individual_collaborator' +table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) when 'individual_professional' +table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) when 'group_collaborator' +table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation) when 'group_professional' +table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation) when 'group_organization' +table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation) when 'student_free' +table_head_student_free(highlighted, period) when 'student_student' +table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, tableHeadOptions.showExtraContent) when 'student_university' +table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) for featuresPerSection in config.features - var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan) if featuresPerSection.divider tr.plans-v2-table-divider td( colspan=dividerColspan class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '') ) div b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)} //- will only appear on screen width >= 768px (using CSS) i.fa.fa-question-circle.plans-v2-table-divider-question-icon( data-toggle="tooltip" title=translate(featuresPerSection.dividerInfo), data-placement="top" ) //- will only appear on screen width < 768px (using CSS) span.plans-v2-table-divider-learn-more-container span ( span.plans-v2-table-divider-learn-more-text( data-toggle="tooltip" title=translate(featuresPerSection.dividerInfo), data-placement="top" ) #{translate("learn_more_lowercase")} span ) for feature, featureIndex in featuresPerSection.items unless !showNewCompileTimeoutVariant && feature.feature === 'compile_servers' tr( class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`) ) td( event-tracking="plans-page-table" event-tracking-trigger="hover" event-tracking-ga="subscription-funnel" event-tracking-label=`${feature.feature}` colspan=baseColspan ) .plans-v2-table-feature-name if feature.info span #{translate(feature.feature)} //- will only appear on screen width >= 768px (using CSS) if showNewCompileTimeoutVariant && feature.info === 'compile_timeout_short_info' i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon( data-toggle="tooltip" title=translate("compile_timeout_short_info_basic"), data-placement="right" ) //- will only appear on screen width < 768px (using CSS) span.plans-v2-table-feature-name-learn-more-container span ( span.plans-v2-table-feature-name-learn-more-text( data-toggle="tooltip" title=translate("compile_timeout_short_info_basic"), data-placement="top" ) #{translate("learn_more_lowercase")} span ) else i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon( data-toggle="tooltip" title=translate(feature.info), data-placement="right" ) //- will only appear on screen width < 768px (using CSS) span.plans-v2-table-feature-name-learn-more-container span ( span.plans-v2-table-feature-name-learn-more-text( data-toggle="tooltip" title=translate(feature.info), data-placement="top" ) #{translate("learn_more_lowercase")} span ) else | #{translate(feature.feature)} for plan, planIndex in Object.keys(feature.plans) - var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {} - var colspan = tableHeadOptions.colspan || baseColspan - if (planIndex === discountedColumn.index) { var tdClass = 'plans-v2-table-discount-highlighted' } else if (planIndex === config.highlightedColumn.index) { var tdClass = 'plans-v2-table-green-highlighted' } else if (planIndex === config.highlightedColumn.index - 1) { var tdClass = 'plans-v2-table-cell-before-green-highlighted-column' } else { var tdClass = '' } td( class=tdClass colspan=colspan ) +table_cell(feature, plan) mixin table_individual(period) table.card.plans-v2-table.plans-v2-table-individual +plans_v2_table(period, plansConfig.individual) mixin table_group table.card.plans-v2-table.plans-v2-table-group +plans_v2_table('annual', plansConfig.group) mixin table_student(period) table.card.plans-v2-table.plans-v2-table-student +plans_v2_table(period, plansConfig.student) mixin table_head_individual_free(highlighted, period) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("free")} +table_head_price('free', period) .plans-v2-table-btn-buy-container-mobile +btn_buy_individual_free(highlighted) ul.plans-v2-table-th-content-benefit li #{translate("one_collaborator")} .plans-v2-table-btn-buy-container-desktop +btn_buy_individual_free(highlighted) mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("standard")} +table_head_price('collaborator', period) .plans-v2-table-btn-buy-container-mobile +btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) ul.plans-v2-table-th-content-benefit li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} li #{translate("all_premium_features")} .plans-v2-table-btn-buy-container-desktop +btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("professional")} +table_head_price('professional', period) .plans-v2-table-btn-buy-container-mobile +btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) ul.plans-v2-table-th-content-benefit li !{translate("unlimited_collabs_rt",{},["b"])} li #{translate("all_premium_features")} .plans-v2-table-btn-buy-container-desktop +btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("group_standard")} .plans-v2-table-price-container strike.plans-v2-table-price-before-discount +gen_localized_price_for_plan_view('collaborator', 'annual') p.plans-v2-table-price span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator} p.plans-v2-table-price-period-label | #{translate('per_user_year')} .plans-v2-table-btn-buy-container-mobile +btn_buy_group_collaborator(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator') ul.plans-v2-table-th-content-benefit li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})} li +table_head_group_total_per_year('collaborator') .plans-v2-table-btn-buy-container-desktop +btn_buy_group_collaborator(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator') mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("group_professional")} .plans-v2-table-price-container strike.plans-v2-table-price-before-discount +gen_localized_price_for_plan_view('professional', 'annual') p.plans-v2-table-price span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional} p.plans-v2-table-price-period-label | #{translate('per_user_year')} .plans-v2-table-btn-buy-container-mobile +btn_buy_group_professional(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional') ul.plans-v2-table-th-content-benefit li #{translate("unlimited_collaborators_in_each_project")} li +table_head_group_total_per_year('professional') .plans-v2-table-btn-buy-container-desktop +btn_buy_group_professional(highlighted, eventTrackingKey) +additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional') mixin table_head_group_total_per_year(groupPlan) - var initialLicenseSize = '2' span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]} |   for licenseSize in groupPlanModalOptions.sizes span( hidden=(licenseSize !== initialLicenseSize) data-ol-plans-v2-table-th-group-license-size=licenseSize ) !{translate("total_per_year_for_x_users", {licenseSize})} mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation) - var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation)) .plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("organization")} .plans-v2-table-comments-icon i.fa.fa-comments-o .plans-v2-table-btn-buy-container-mobile +btn_buy_group_organization(highlighted, eventTrackingKey) small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true") ul.plans-v2-table-th-content-benefit li #{translate("best_choices_companies_universities_non_profits")} li #{translate("for_groups_or_site_wide")} li a( target="_blank" href="/for/contact-sales" event-tracking="plans-page-click" event-tracking-mb="true" event-tracking-trigger="click" event-segmentation=segmentation ) #{translate("also_available_as_on_premises")} .plans-v2-table-btn-buy-container-desktop +btn_buy_group_organization(highlighted, eventTrackingKey) small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true") mixin table_head_student_free(highlighted, period) div.plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("free")} +table_head_price('free', period) .plans-v2-table-btn-buy-container-mobile +btn_buy_student_free(highlighted) ul.plans-v2-table-th-content-benefit li #{translate("one_collaborator")} .plans-v2-table-btn-buy-container-desktop +btn_buy_student_free(highlighted) mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent) div.plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("student")} +table_head_price('student', period) .plans-v2-table-btn-buy-container-mobile +btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) ul.plans-v2-table-th-content-benefit li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})} li #{translate("all_premium_features")} if showExtraContent li b !{translate("for_students_only")} .plans-v2-table-btn-buy-container-desktop +btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) div.plans-v2-table-th-content p.plans-v2-table-th-content-title #{translate("university")} div.plans-v2-table-comments-icon i.fa.fa-comments-o .plans-v2-table-btn-buy-container-mobile +btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])} .plans-v2-table-btn-buy-container-desktop +btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) mixin table_head_price(plan, period) div.plans-v2-table-price-container if plan !== 'free' && period === 'annual' strike.plans-v2-table-price-before-discount +gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve') p.plans-v2-table-price +gen_localized_price_for_plan_view(plan, period) p.plans-v2-table-price-period-label if period == 'annual' | #{translate("per_year")} else | #{translate("per_month")} mixin table_cell(feature, plan) - var planValue = feature.plans[plan] - var featureName = feature.feature .plans-v2-table-cell .plans-v2-table-cell-content( data-ol-plans-v2-table-cell-plan=plan data-ol-plans-v2-table-cell-feature=featureName ) if feature.feature === 'compile_servers' if showNewCompileTimeoutVariant | #{translate(planValue)} else if feature.feature === 'compile_timeout_short' if showNewCompileTimeoutVariant && plan !== 'group_standard' && plan !== 'group_professional' && plan !== 'organization' if plan === 'free' | #{translate("basic")}  strong * else | #{translate("12x_basic")} else if plan === 'free' | #{translate(planValue)}  strong * else | #{translate(planValue)} else if (feature.value === 'str') | !{translate(planValue, {}, ['strong'])} else if (feature.value === 'bool') if (planValue) i.fa.fa-check(aria-hidden="true") span.sr-only #{translate("feature_included")} else span(aria-hidden="true") - span.sr-only #{translate("feature_not_included")} mixin group_plans_license_picker() form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form) .plans-v2-license-picker-select-container span #{translate("number_of_users_with_colon")} select.plans-v2-license-picker-select( name="plans-v2-license-picker-select" id="plans-v2-license-picker-select" autocomplete="off" data-ol-plans-v2-license-picker-select event-tracking="plans-page-group-size" event-tracking-mb="true" event-tracking-trigger="click" event-tracking-element="select" ) option(value="2") 2 option(value="3") 3 option(value="4") 4 option(value="5") 5 option(value="10") 10 option(value="20") 20 option(value="50") 50 .plans-v2-license-picker-educational-discount label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label) input.plans-v2-license-picker-educational-discount-checkbox( type="checkbox" id="license-picker-educational-discount" autocomplete="off" data-ol-plans-v2-license-picker-educational-discount-input event-tracking="plans-page-edu-discount" event-tracking-mb="true" event-tracking-trigger="click" event-tracking-element="checkbox" ) span #{translate("apply_educational_discount")} //- will only appear on screen width >= 768px (using CSS) i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon( data-toggle="tooltip" title=translate("apply_educational_discount_info"), data-placement="bottom" ) //- will only appear on screen width < 768px (using CSS) span.plans-v2-license-picker-educational-discount-learn-more-container span ( span.plans-v2-license-picker-educational-discount-learn-more-text( data-toggle="tooltip" title=translate("apply_educational_discount_info"), data-placement="bottom" ) #{translate("learn_more_lowercase")} span ) mixin btn_buy_individual(highlighted, discountHighlighted, eventTrackingKey, subscriptionPlan, period) a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription=subscriptionPlan data-ol-event-tracking-key=eventTrackingKey data-ol-item-view=period class=(discountHighlighted ? 'btn-dark-blue' : (highlighted ? 'btn-primary' : 'btn-default')) ) if (period === 'monthly') span #{translate("try_for_free")} else span #{translate("buy_now_no_exclamation_mark")} mixin btn_buy_individual_free() if (!getSessionUser()) a.btn.plans-v2-table-btn-buy( href="/register" class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("try_for_free")} else a.btn.plans-v2-table-btn-buy.invisible( aria-hidden="true" class=(highlighted ? 'btn-primary' : 'btn-default') ) mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period) +btn_buy_individual(highlighted, false, eventTrackingKey, 'collaborator', period) if (period === 'monthly') +additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'collaborator', period) mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period) +btn_buy_individual(highlighted, false, eventTrackingKey, 'professional', period) if (period === 'monthly') +additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period) mixin btn_buy_group_collaborator(highlighted, eventTrackingKey) a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='group_collaborator' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view='annual' data-ol-has-custom-href data-ol-location='table-header' class=(highlighted ? 'btn-primary' : 'btn-default') ) span.hidden-desktop #{translate("customize")} span.hidden-mobile #{translate("customize_your_plan")} mixin btn_buy_group_professional(highlighted, eventTrackingKey) a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='group_professional' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view='annual' data-ol-has-custom-href data-ol-location='table-header' class=(highlighted ? 'btn-primary' : 'btn-default') ) span.hidden-desktop #{translate("customize")} span.hidden-mobile #{translate("customize_your_plan")} mixin btn_buy_group_organization(highlighted, eventTrackingKey) a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='group_organization' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view='annual' data-ol-has-custom-href data-ol-location='table-header' href='/for/contact-sales' target='_blank' class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("contact_us_lowercase")} mixin btn_buy_student_free(highlighted) if (!getSessionUser()) a.btn.plans-v2-table-btn-buy( href="/register" class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("try_for_free")} mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period) a.btn.plans-v2-table-btn-buy( data-ol-start-new-subscription='student' data-ol-event-tracking-key=eventTrackingKey data-ol-item-view=period data-ol-location='card' class=(highlighted ? 'btn-primary' : 'btn-default') ) if (period === 'monthly') span #{translate("try_for_free")} else span #{translate("buy_now_no_exclamation_mark")} if (period === 'monthly') +additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'student', period) mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) - var segmentation = JSON.stringify(Object.assign({}, {button: 'student-university', location: 'table-header-list', period}, additionalEventSegmentation)) a.btn.plans-v2-table-btn-buy( href="/for/contact-sales" target="_blank" event-tracking=eventTrackingKey event-tracking-mb="true" event-tracking-trigger="click" event-segmentation=segmentation class=(highlighted ? 'btn-primary' : 'btn-default') ) span #{translate("contact_us_lowercase")} mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan) - var buttonSegmentation = plan + '-link' - var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation)) small.plans-v2-table-th-content-additional-link | #{translate("or")} a( href="/for/contact-sales" target="_blank" event-tracking=eventTrackingKey event-tracking-mb="true" event-tracking-trigger="click" event-segmentation=segmentation ) #{translate("contact_us_lowercase")} mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period) - var buttonSegmentation = plan + '-link' - var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header', period}, additionalEventSegmentation)) - var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'} - var itmReferrer = itm_referrer ? { itm_referrer } : {} - var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer}) small.plans-v2-table-th-content-additional-link | #{translate("or")} a( href=`/user/subscription/new?${qs.toString()}` event-tracking=eventTrackingKey event-tracking-mb="true" event-tracking-trigger="click" event-segmentation=segmentation ) #{translate("buy_now_no_exclamation_mark")} mixin plans_v2_table_sticky_header(withSwitch, config) - var tableHeadKeys = Object.keys(config.tableHead) .row.plans-v2-table-sticky-header.sticky( data-ol-plans-v2-table-sticky-header class=(withSwitch ? 'plans-v2-table-sticky-header-with-switch' : 'plans-v2-table-sticky-header-without-switch') ) - for (var i = 0; i < tableHeadKeys.length; i++) - var tableHeadKey = tableHeadKeys[i] - var translateKey = tableHeadKey.split('_')[1] - if (config.discountedColumn?.index === i) { var elClass = 'plans-v2-table-sticky-header-item-discount-highlighted' } else if (config.highlightedColumn.index === i) { var elClass = 'plans-v2-table-sticky-header-item-green-highlighted' } else { var elClass = '' } .plans-v2-table-sticky-header-item( class=elClass ) case tableHeadKey when 'individual_collaborator' span #{translate('standard')} when 'group_professional' span #{translate(tableHeadKey)} when 'group_collaborator' span #{translate('group_standard')} default span #{translate(translateKey)} mixin table_sticky_header_all(plansConfig) .row.plans-v2-table-sticky-header-container( data-ol-plans-v2-view='individual' ) +plans_v2_table_sticky_header(true, plansConfig.individual) .row.plans-v2-table-sticky-header-container( hidden data-ol-plans-v2-view='group' ) +plans_v2_table_sticky_header(false, plansConfig.group) .row.plans-v2-table-sticky-header-container( hidden data-ol-plans-v2-view='student' ) +plans_v2_table_sticky_header(true, plansConfig.student) mixin monthly_annual_switch(initialState, eventTracking, eventSegmentation) - var monthlyAnnualToggleChecked = initialState === 'monthly' .row .col-md-4.col-md-offset-4.text-centered.plans-v2-m-a-switch-container(data-ol-plans-v2-m-a-switch-container) .plans-v2-m-a-switch-annual-text-container span.underline(data-ol-plans-v2-m-a-switch-text='annual') #{translate("annual")} .tooltip.in.left.plans-v2-m-a-tooltip( role="tooltip" data-ol-plans-v2-m-a-tooltip class=monthlyAnnualToggleChecked ? 'plans-v2-m-a-tooltip-monthly-selected' : '' ) .tooltip-arrow .tooltip-inner span(hidden=!monthlyAnnualToggleChecked data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")} span(hidden=monthlyAnnualToggleChecked data-ol-tooltip-period='annual') #{translate("saving_20_percent")} label.plans-v2-m-a-switch(data-ol-plans-v2-m-a-switch) input( type="checkbox" checked=monthlyAnnualToggleChecked role="switch" autocomplete="off" event-tracking=eventTracking event-tracking-mb="true" event-tracking-trigger="click" event-tracking-element="checkbox" event-segmentation=eventSegmentation ) span span(data-ol-plans-v2-m-a-switch-text='monthly') #{translate("monthly")}