<?php

/**

 * Multi-step checkout timeline template.

 *

 * @package Adeline WordPress theme */

if (!defined('ABSPATH')) {

	exit ;
	// Exit if accessed directly

}

// Vars

$i = 0;

$enable_login_reminder = 'yes' == get_option('woocommerce_enable_checkout_login_reminder', 'yes') ? true : false;

$is_logged_in = is_user_logged_in();

$show_login_step = !$is_logged_in && $enable_login_reminder;

// Style

$style = adeline_get_option_value('woo_multi_step_checkout_timeline_style', '', 'arrow');

$style = $style ? $style : 'arrow';

// Define classes

$classes = array('dpr-woo-checkout-timeline', 'clr');

// Style

$classes[] = $style;

// If login

if ($show_login_step) {

	$classes[] = 'step-4';

}

// Turn classes into string

$classes = implode(' ', $classes);
 ?>

<ul id="dpr-checkout-timeline" class="<?php echo esc_attr($classes); ?>">
  <?php if ( $show_login_step ) { ?>
  <li id="timeline-0" data-step="0" class="timeline login <?php echo !$is_logged_in ? 'active' : ''; ?>">
    <div class="timeline-wrapper"> <span class="timeline-step"><?php echo esc_html($i = $i + 1) ?></span> <span class="timeline-label">
      <?php esc_html_e('Login', 'adeline'); ?>
      </span> </div>
  </li>
  <?php } ?>
  <li id="timeline-1" data-step="1" class="timeline billing <?php echo !$show_login_step ? 'active' : ''; ?>">
    <div class="timeline-wrapper"> <span class="timeline-step"><?php echo esc_html($i = $i + 1) ?></span> <span class="timeline-label">
      <?php esc_html_e('Billing', 'adeline'); ?>
      </span> </div>
  </li>
  <li id="timeline-2" data-step="2" class="timeline shipping" >
    <div class="timeline-wrapper"> <span class="timeline-step"><?php echo esc_html($i = $i + 1) ?></span> <span class="timeline-label">
      <?php esc_html_e('Shipping', 'adeline'); ?>
      </span> </div>
  </li>
  <li id="timeline-3" data-step="3" class="timeline payment">
    <div class="timeline-wrapper"> <span class="timeline-step"><?php echo esc_html($i = $i + 1) ?></span> <span class="timeline-label">
      <?php esc_html_e('Payment Info', 'adeline'); ?>
      </span> </div>
  </li>
</ul>
