<?php if ( ! defined( 'ABSPATH' ) ) {
	exit;} ?>
<div class="volade-onboarding-overlay" id="volade-onboarding"
	data-ajax-url="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>"
	data-nonce="<?php echo esc_attr( wp_create_nonce( 'volade_nonce' ) ); ?>"
	data-redirect="<?php echo esc_url( admin_url( 'admin.php?page=volade-discover' ) ); ?>">
	<div class="volade-onboarding-modal" role="dialog" aria-modal="true" aria-labelledby="volade-onboarding-title">
		<div class="volade-onboarding-steps">
			<?php foreach ( $this->get_onboarding_steps() as $i => $step ) : ?>
				<div class="volade-onboarding-step<?php echo $i === 0 ? ' active' : ''; ?>" data-step="<?php echo (int) $i; ?>">
					<div class="volade-onboarding-icon"><?php echo esc_html( $step['icon'] ); ?></div>
					<h2 id="<?php echo 0 === $i ? 'volade-onboarding-title' : ''; ?>"><?php echo esc_html( $step['title'] ); ?></h2>
					<p><?php echo esc_html( $step['desc'] ); ?></p>
				</div>
			<?php endforeach; ?>
		</div>
		<div class="volade-onboarding-dots">
			<?php
			/**
			 *
			 * @license GPL-2.0-or-later
			 */
			$steps = $this->get_onboarding_steps();
			foreach ( $steps as $i => $step ) :
				?>
				<span class="volade-dot<?php echo $i === 0 ? ' active' : ''; ?>" data-dot="<?php echo (int) $i; ?>"></span>
			<?php endforeach; ?>
		</div>
		<p class="volade-onboarding-msg" role="status" aria-live="polite"></p>
		<div class="volade-onboarding-actions">
			<button type="button" class="volade-btn volade-btn-secondary" id="volade-onboarding-skip"><?php $this->_e( 'Passer' ); ?></button>
			<button type="button" class="volade-btn volade-btn-primary" id="volade-onboarding-next"><?php $this->_e( 'Suivant' ); ?></button>
			<button type="button" class="volade-btn volade-btn-primary volade-onboarding-hidden" id="volade-onboarding-finish"><?php $this->_e( 'Commencer' ); ?></button>
		</div>
	</div>
</div>
