<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div id="emr-wizard-overlay" class="wpr-wizard-overlay" style="display:none" role="dialog" aria-modal="true" aria-labelledby="emr-wiz-title">
  <div class="wpr-wizard">

    <div class="wpr-wizard__hd">
      <div class="wpr-wizard__hd-top">
        <div class="wpr-wizard__brand">
          <svg class="wpr-wizard__brand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <rect x="3" y="4" width="18" height="18" rx="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/>
            <line x1="8"  y1="2" x2="8"  y2="6"/>
            <line x1="3"  y1="10" x2="21" y2="10"/>
          </svg>
          <span>EmpRoster</span>
        </div>
        <span class="wpr-wizard__step-counter" id="emr-wiz-counter" aria-live="polite"></span>
      </div>

      <nav class="wpr-wizard__progress" aria-label="Setup progress" id="emr-wiz-progress">
        <?php
        $wiz_steps = array( 'Company', 'Locations', 'Departments', 'Employment', 'Features' );
        foreach ( $wiz_steps as $i => $label ) :
            $step_num = $i + 1;
        ?>
          <div class="wpr-wiz-dot" data-step="<?php echo esc_attr( $step_num ); ?>" title="<?php echo esc_attr( $label ); ?>">
            <div class="wpr-wiz-dot__pip"></div>
            <div class="wpr-wiz-dot__label"><?php echo esc_html( $label ); ?></div>
          </div>
          <?php if ( $i < count( $wiz_steps ) - 1 ) : ?>
            <div class="wpr-wiz-connector"></div>
          <?php endif; ?>
        <?php endforeach; ?>
      </nav>
    </div>

    <div class="wpr-wizard__body" id="emr-wiz-body">
      <!-- Populated by wizard.js -->
    </div>

    <div class="wpr-wizard__ft" id="emr-wiz-footer">
      <button type="button" id="emr-wiz-back" class="wpr-btn wpr-btn--ghost">&#8592; Back</button>
      <button type="button" id="emr-wiz-skip" class="wpr-btn wpr-btn--ghost wpr-wiz-skip-btn">Skip step</button>
      <button type="button" id="emr-wiz-next" class="wpr-btn wpr-btn--primary">Next &#8594;</button>
    </div>

  </div>
</div>
