{#
	Formulas content (shared) — Osmo Basic Filter.
	data-* must not be renamed. Amateur / Elite switch.
#}
{% import 'macros.twig' as macros %}

{% set features = [
	'Séances techniques, cognitives, physiques et mentales',
	'Encadrement par un coach dédié',
	'Suivi complet et sur-mesure pour une progression garantie',
	'Suivi hebdomadaire de tes performances',
	'Collaboration possible avec ton club',
	'Séances d’analyses vidéos sous réserve de disposer d’images nécessaires'
] %}

{% set plans = [
	{
		filter: 'amateur',
		tag: 'amateur',
		title: 'Formule libre',
		price: '65€',
		description: 'Option idéale pour ceux qui veulent s’entraîner ponctuellement',
		included: 2
	},
	{
		filter: 'amateur',
		tag: 'amateur',
		title: 'Formule suivi',
		price: '95€',
		description: 'Un rythme régulier pour progresser avec un cadre clair',
		included: 4
	},
	{
		filter: 'amateur',
		tag: 'amateur',
		title: 'Formule accompagnement',
		price: '125€',
		description: 'Un suivi plus serré pour ancrer les progrès dans la durée',
		included: 5
	},
	{
		filter: 'amateur',
		tag: 'amateur',
		title: 'Formule intensive',
		price: '155€',
		description: 'Un volume élevé pour viser un cap plus ambitieux',
		included: 6
	},
	{
		filter: 'elite',
		tag: 'elite',
		title: 'Formule pro',
		price: '250€',
		description: 'Un programme exigeant, calé sur la compétition',
		included: 5
	},
	{
		filter: 'elite',
		tag: 'elite',
		title: 'Formule élite',
		price: '390€',
		description: 'Accompagnement complet pour viser le plus haut niveau',
		included: 6
	}
] %}

<div role="group" data-filter-group="" class="filter-group">
	<div class="block-formulas__header">
		<h2 class="block-formulas__title font-title text-lg" js-reveal="line">
			<span>Des expertises complémentaires réunies autour d’une même ambition : faire progresser chaque individu</span>
		</h2>

		<div data-toggle-init="" class="toggle-switch" style="--toggle-count: 2">
			<div aria-hidden="true" class="toggle-switch__bg"></div>
			<button
				type="button"
				data-toggle-btn=""
				data-toggle-active=""
				data-filter-target="amateur"
				data-filter-status="active"
				aria-pressed="true"
				aria-controls="filter-list"
				class="toggle-switch__btn text-xxs"
			>
				<span>Amateur</span>
			</button>
			<button
				type="button"
				data-toggle-btn=""
				data-filter-target="elite"
				data-filter-status="not-active"
				aria-pressed="false"
				aria-controls="filter-list"
				class="toggle-switch__btn text-xxs"
			>
				<span>Elite</span>
			</button>
		</div>
	</div>

	<div aria-live="polite" role="list" id="filter-list" class="filter-list">
		{% for plan in plans %}
			<div
				role="listitem"
				data-filter-name="{{ plan.filter }}"
				data-filter-status="{{ plan.filter == 'amateur' ? 'active' : 'not-active' }}"
				aria-hidden="{{ plan.filter == 'amateur' ? 'false' : 'true' }}"
				class="filter-list__item"
			>
				<article class="formula-card">
					<p class="formula-card__tag font-mono text-xxs">
						<span class="formula-card__dot" aria-hidden="true"></span>
						{{ plan.tag }}
					</p>
					<div class="formula-card__top">
						<h3 class="formula-card__name font-title">{{ plan.title }}</h3>
						<p class="formula-card__price font-title">{{ plan.price }}</p>
					</div>
					<p class="formula-card__desc text-xxs">{{ plan.description }}</p>
					<ul class="formula-card__features">
						{% for feature in features %}
							<li class="formula-card__feature text-xxs {{ loop.index <= plan.included ? 'is-included' : 'is-excluded' }}">
								{% if loop.index <= plan.included %}
									<span class="formula-card__check" aria-hidden="true">
										<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
											<path d="M1.5 5.2L3.8 7.5L8.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="square"/>
										</svg>
									</span>
								{% endif %}
								<span js-reveal="line">{{ feature }}</span>
							</li>
						{% endfor %}
					</ul>
					{{ macros.button_043(__('Profiter d’une séance découverte', 'genesis'), '#', {
						classes: 'button-043--white font-mono text-xxs',
						reveal: false,
						attrs: 'data-modal-target="discovery" data-modal-status="not-active"'
					}) }}
				</article>
			</div>
		{% endfor %}
	</div>
</div>
