{#
	Discovery booking modal — Osmo Basic Modal + city → iframe steps.
	data-modal-* / data-discovery-* must not be renamed.
#}
{% set discovery_cities = options.discovery_cities|default([
	{ city_name: 'Paris', iframe_url: 'https://example.com/paris' },
	{ city_name: 'Bordeaux', iframe_url: 'https://example.com/bordeaux' },
	{ city_name: 'Poitiers', iframe_url: 'https://example.com/poitiers' }
]) %}

<div
	data-discovery-modal
	data-discovery-view="city"
	data-modal-group-status="not-active"
	class="modal discovery-modal"
>
	<div data-modal-close="" class="modal__dark"></div>

	<div data-modal-name="discovery" data-modal-status="not-active" class="modal__card">
		<div class="modal__scroll">
			<div class="modal__content" data-discovery-step="city">
				<p class="discovery-modal__eyebrow font-mono text-xxs">{{ __('La draft', 'genesis')|upper }}</p>
				<h2 class="discovery-modal__title font-title text-lg">
					{{ __('Où souhaitez-vous faire votre séance de découverte gratuite ?', 'genesis')|upper }}
				</h2>

				<ul class="discovery-modal__cities" role="list">
					{% for city in discovery_cities %}
						{% set name = city.city_name|default(city.name)|default('') %}
						{% set url = city.iframe_url|default(city.url)|default('') %}
						{% if name and url %}
							<li>
								<button
									type="button"
									class="discovery-modal__city font-mono text-xxs"
									data-discovery-city
									data-discovery-city-status="not-active"
									data-discovery-iframe-url="{{ url|e('html_attr') }}"
								>
									<span>{{ name|upper }}</span>
									<span class="discovery-modal__radio" aria-hidden="true"></span>
								</button>
							</li>
						{% endif %}
					{% endfor %}
				</ul>
			</div>

			<div class="modal__content" data-discovery-step="iframe">
				<h2 class="discovery-modal__title font-title text-lg">
					{{ __('Sélectionnez la date et l’heure', 'genesis')|upper }}
				</h2>
				<div class="discovery-modal__iframe-shell">
					<iframe
						data-discovery-iframe
						class="discovery-modal__iframe"
						title="{{ __('Réservation séance découverte', 'genesis') }}"
						loading="lazy"
						referrerpolicy="no-referrer-when-downgrade"
					></iframe>
				</div>
			</div>
		</div>

		<button type="button" data-modal-close="" class="modal__btn-close" aria-label="{{ __('Fermer', 'genesis') }}">
			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="modal__btn-close-icon">
				<path d="M19 5L5 19" stroke="currentColor" stroke-miterlimit="10"></path>
				<path d="M5 5L19 19" stroke="currentColor" stroke-miterlimit="10"></path>
			</svg>
		</button>
	</div>
</div>
