<?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>
