include ./_table_ctas include ./_table_short_feature_lists include ./_table_column_headers_row 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 #{formatCurrency(settings.localizedPlanPricing[recommendedCurrency][plan][view], recommendedCurrency, language, true)} mixin currency_and_payment_methods() .row.plans-payment-methods.text-centered .col-xs-12 p b #{translate("all_prices_displayed_are_in_currency", { recommendedCurrency })} |  #{translate("subject_to_additional_vat")} .plans-payment-methods-icons img(src=buildImgPath('/other-brands/logo_mastercard.svg') aria-hidden="true") span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Mastercard' })} img(src=buildImgPath('/other-brands/logo_visa.svg') aria-hidden="true") span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Visa' })} img(src=buildImgPath('/other-brands/logo_amex.svg') aria-hidden="true") span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Amex' })} img(src=buildImgPath('/other-brands/logo_paypal.svg') aria-hidden="true") span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })} mixin plans_table(period, config) - var maxColumn = config.maxColumn || 4 - var tableHeadKeys = Object.keys(config.tableHead) - var highlightedColKey = tableHeadKeys[config.highlightedColumn.index] -var highlightedColTranslationKey = config.highlightedColumn.text[period] === 'most_popular' ? 'most_popular_uppercase' : config.highlightedColumn.text[period] === 'saving_20_percent' ? 'saving_20_percent_no_exclamation' : config.highlightedColumn.text[period] +table_column_headers_row({maxColumn, tableHeadKeys, highlightedColKey, highlightedColTranslationKey}) tr(class=`plans-table-price-row plans-table-cols-${tableHeadKeys.length}`) td - for (const [tableHeadKey] of Object.entries(config.tableHead)) - var highlighted = highlightedColKey === tableHeadKey - var eventTrackingKey = config.eventTrackingKey - var additionalEventSegmentation = config.additionalEventSegmentation || {} - var tdClass = highlighted ? 'plans-table-green-highlighted' : '' td(class=tdClass) .plans-table-cell.plans-table-cell-price case tableHeadKey when 'individual_free' +table_head_price('free', period) when 'individual_collaborator' +table_head_price('collaborator', period) when 'individual_professional' +table_head_price('professional', period) when 'group_collaborator' +table_price_group_collaborator() when 'group_professional' +table_price_group_professional() when 'group_organization' .plans-table-comments-icon .match-non-discounted-price-alignment   i.material-symbols.material-symbols-outlined(aria-hidden="true") forum when 'student_free' +table_head_price('free', period) when 'student_student' +table_head_price('student', period) tr(class=`plans-table-cta-mobile plans-table-cols-${tableHeadKeys.length}`) td - for (const [tableHeadKey] of Object.entries(config.tableHead)) - var highlighted = highlightedColKey === tableHeadKey - var eventTrackingKey = config.eventTrackingKey - var additionalEventSegmentation = config.additionalEventSegmentation || {} - var tdClass = highlighted ? 'plans-table-green-highlighted' : '' td(class=tdClass) .plans-table-cell.plans-table-cell-cta-mobile .plans-table-btn-buy-container-mobile +plans_cta(tableHeadKey, highlighted, eventTrackingKey, additionalEventSegmentation, period) tr(class=`plans-table-short-feature-list plans-table-cols-${tableHeadKeys.length}`) td - for (const [tableHeadKey, tableHeadOptions] of Object.entries(config.tableHead)) - var highlighted = highlightedColKey === tableHeadKey - var eventTrackingKey = config.eventTrackingKey - var additionalEventSegmentation = config.additionalEventSegmentation || {} - var tdClass = highlighted ? 'plans-table-green-highlighted' : '' td(class=tdClass) .plans-table-cell.plans-table-cell-short-feature-list div case tableHeadKey when 'individual_free' +table_short_feature_list_free() when 'individual_collaborator' +table_short_feature_list_collaborator() when 'individual_professional' +table_short_feature_list_professional() when 'group_collaborator' +table_short_feature_list_group_collaborator() when 'group_professional' +table_short_feature_list_group_professional() when 'group_organization' +table_short_feature_list_group_organization(additionalEventSegmentation) when 'student_free' +table_short_feature_list_free() when 'student_student' +table_short_feature_list_student_student(tableHeadOptions.showExtraContent) tr(class=`plans-table-cta-desktop plans-table-cols-${tableHeadKeys.length}`) td - for (const [tableHeadKey] of Object.entries(config.tableHead)) - var highlighted = highlightedColKey === tableHeadKey - var eventTrackingKey = config.eventTrackingKey - var additionalEventSegmentation = config.additionalEventSegmentation || {} - var tdClass = highlighted ? 'plans-table-green-highlighted' : '' td(class=tdClass) .plans-table-cell.plans-table-cell-cta-desktop .plans-table-btn-buy-container-desktop +plans_cta(tableHeadKey, highlighted, eventTrackingKey, additionalEventSegmentation, period) for featuresPerSection, featuresSectionIndex in config.features - var dividerColspan = Object.values(config.tableHead).length + 1 if featuresPerSection.divider tr.plans-table-divider td( colspan=dividerColspan class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-table-last-col-highlighted' : '') ) .plans-table-cell-divider //- all cells need 2 layers of divs for handling border and padding. See .plans-table in CSS for more details .plans-table-cell-divider-content b.plans-table-divider-label #{translate(featuresPerSection.dividerLabel)} //- will only appear on screen width >= 768px (using CSS) i.material-symbols.material-symbols-outlined.icon-sm( data-toggle="tooltip" title=translate(featuresPerSection.dividerInfo), data-placement="top" ) help //- will only appear on screen width < 768px (using CSS) span.plans-table-divider-learn-more-container span ( span.plans-table-divider-learn-more-text( data-toggle="tooltip" title=translate(featuresPerSection.dividerInfo), data-placement="top" ) #{translate("learn_more_lowercase")} span ) span.sr-only #{translate(featuresPerSection.dividerInfo)} for feature, featureIndex in featuresPerSection.items tr( class=`plans-table-feature-row plans-table-cols-${tableHeadKeys.length}` ) th( event-tracking="plans-page-table" event-tracking-trigger="hover" event-tracking-ga="subscription-funnel" event-tracking-label=`${feature.feature}` scope="row" class=`${featuresSectionIndex === 0 && featureIndex === 0 ? 'plans-table-first-feature-header' : ''}` ) .plans-table-feature-name .plans-table-feature-name-content if feature.info span #{translate(feature.feature)} //- will only appear on screen width >= 768px (using CSS) i.material-symbols.material-symbols-outlined.icon-sm.plans-table-feature-question-icon( data-toggle="tooltip" title=translate(feature.info), data-placement="right" ) help //- will only appear on screen width < 768px (using CSS) span.plans-table-feature-learn-more-container span ( span.plans-table-feature-learn-more-text( data-toggle="tooltip" title=translate(feature.info), data-placement="top" ) #{translate("learn_more_lowercase")} span ) span.sr-only #{translate(feature.info)} else | #{translate(feature.feature)} for plan, planIndex in Object.keys(feature.plans) - var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {} - var tdClass = planIndex === config.highlightedColumn.index ? 'plans-table-green-highlighted' : '' td(class=tdClass) +table_cell(feature, plan) mixin table_individual(period) table.plans-table.plans-table-individual +plans_table(period, plansConfig.individual) mixin table_group table.plans-table.plans-table-group +plans_table('annual', plansConfig.group) mixin table_student(period) table.plans-table.plans-table-student +plans_table(period, plansConfig.student) //- group mixins mixin table_price_group_collaborator() .plans-table-price-container s +gen_localized_price_for_plan_view('collaborator', 'annual') p.plans-table-price span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator} p.plans-table-price-period-label | #{translate('per_user_year')} mixin table_price_group_professional() .plans-table-price-container s +gen_localized_price_for_plan_view('professional', 'annual') p.plans-table-price span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional} p.plans-table-price-period-label | #{translate('per_user_year')} mixin table_head_group_total_per_year(groupPlan) - var initialLicenseSize = '2' span.plans-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 group_plans_license_picker() form.plans-license-picker-form(data-ol-plans-v2-license-picker-form) .plans-license-picker-select-container span #{translate("number_of_users_with_colon")} 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(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.material-symbols.material-symbols-outlined.icon-sm( data-toggle="tooltip" title=translate("apply_educational_discount_info"), data-placement="bottom" ) help //- 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 ) span.sr-only #{translate("apply_educational_discount_info")} //- all plans mixins mixin table_head_price(plan, period) div.plans-table-price-container if plan !== 'free' && period === 'annual' s +gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve') else .match-non-discounted-price-alignment   p.plans-table-price +gen_localized_price_for_plan_view(plan, period) p.plans-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-table-cell .plans-table-cell-content( data-ol-plans-v2-table-cell-plan=plan data-ol-plans-v2-table-cell-feature=featureName ) if (feature.value === 'str') | !{translate(planValue, {}, ['strong'])} else if (feature.value === 'bool') if (planValue) i.material-symbols.material-symbols-outlined.icon-green-round-background.icon-sm(aria-hidden="true") check span.sr-only #{translate("feature_included")} else span(aria-hidden="true") - span.sr-only #{translate("feature_not_included")} //- table header and control mixins mixin plans_table_sticky_header(withSwitch, config) - var tableHeadKeys = Object.keys(config.tableHead) .row.plans-table-sticky-header.sticky( data-ol-plans-v2-table-sticky-header class=(withSwitch ? 'plans-table-sticky-header-with-switch' : 'plans-table-sticky-header-without-switch') ) - for (var i = 0; i < tableHeadKeys.length; i++) - var tableHeadKey = tableHeadKeys[i] - var translateKey = tableHeadKey.split('_')[1] - if (config.highlightedColumn.index === i) { var elClass = 'plans-table-sticky-header-item-green-highlighted' } else { var elClass = '' } .plans-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-table-sticky-header-container( data-ol-plans-v2-view='individual' ) +plans_table_sticky_header(true, plansConfig.individual) .row.plans-table-sticky-header-container( hidden data-ol-plans-v2-view='group' ) +plans_table_sticky_header(false, plansConfig.group) .row.plans-table-sticky-header-container( hidden data-ol-plans-v2-view='student' ) +plans_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.monthly-annual-switch(data-ol-plans-v2-m-a-switch-container) .monthly-annual-switch-text span.underline(data-ol-plans-v2-m-a-switch-text='annual') #{translate("annual")} .tooltip.in.left( 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(data-ol-plans-v2-m-a-switch) input( type="checkbox" checked=monthlyAnnualToggleChecked role="switch" aria-label=translate("select_monthly_plans") 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")}