div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
	.modal-dialog(role="document")
		.modal-content(
			event-tracking="form-submitted-groups-modal-open"
			event-tracking-mb="true"
			event-tracking-trigger="load"
		)
			.modal-header
				button.close(
					type="button"
					data-dismiss="modal"
					aria-label=translate("close")
				)
					span(aria-hidden="true") ×
				h2 #{translate("customize_your_group_subscription")}
				h3 #{translate("save_30_percent_or_more_uppercase")}
			.modal-body.plans.group-subscription-modal
				.container-fluid
					.row
						.col-md-6.text-center
							.circle.circle-lg
								span(data-ol-group-plan-display-price) ...
								span.small / #{translate('year')}
								br
								span.circle-subtext(data-ol-group-plan-price-per-user=translate('per_user')) ...
							ul.list-unstyled
								li #{translate('each_user_will_have_access_to')}:
								li  
								li(
									hidden=(groupPlanModalDefaults.plan_code !== 'collaborator')
									data-ol-group-plan-plan-code='collaborator'
								)
									strong #{translate("collabs_per_proj", {collabcount:10})}
								li(
									hidden=(groupPlanModalDefaults.plan_code !== 'professional')
									data-ol-group-plan-plan-code='professional'
								)
									strong #{translate("unlimited_collabs")}
								+features_premium
						.col-md-6
							form.form(data-ol-group-plan-form)
								.form-group
									label(for='plan_code')
										| #{translate('plan')}
									for plan_code in groupPlanModalOptions.plan_codes
										label.group-plan-option
											input(
												type="radio"
												name="plan_code"
												checked=(plan_code.code === "collaborator")
												value=plan_code.code
												data-ol-group-plan-code=plan_code.code
											)
											span #{translate(plan_code.i18n)}
								.form-group
									label(for='size')
										| #{translate('number_of_users')}
									select.form-control(
										id="size"
										event-tracking="groups-modal-group-size"
										event-tracking-mb="true"
										event-tracking-trigger="click"
										event-tracking-element="select"
									)
										for size in groupPlanModalOptions.sizes
											option(
												value=size
												selected=(size === groupPlanModalDefaults.size)
											) #{size}
								.form-group(data-ol-group-plan-form-currency)
									label(for='currency')
										| #{translate('currency')}
									select.form-control(id="currency")
										for currency in groupPlanModalOptions.currencies
											option(
												value=currency.code
												selected=(currency.code === groupPlanModalDefaults.currency)
											) #{currency.display}
								.form-group
									label(for='usage')
										| #{translate('educational_discount_for_groups_of_ten_or_more')}
								label.group-plan-option
									input(
										id="usage"
										type="checkbox"
										autocomplete="off"
										event-tracking="groups-modal-edu-discount"
										event-tracking-mb="true"
										event-tracking-trigger="click"
										event-tracking-element="checkbox"
									)
									span #{translate('educational_discount_disclaimer')}

					.row
						.col-md-12.text-center
							.educational-discount-badge
								div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount)
									p.applied(hidden=true data-ol-group-plan-educational-discount-applied)
										| #{translate('educational_discount_applied')}
									p.ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible)
										| #{translate('educational_discount_available_for_groups_of_ten_or_more')}
			.modal-footer
				.text-center
					button.btn.btn-primary.btn-lg(
						data-ol-purchase-group-plan
						event-tracking="form-submitted-groups-modal-purchase-click"
						event-tracking-mb="true"
						event-tracking-trigger="click"
						) #{translate('purchase_now')}
					hr.thin
					a(
						href
						data-ol-open-contact-form-for-more-than-50-licenses
					) #{translate('need_more_than_to_licenses_get_in_touch')}