<?php
if ( ! defined( 'ABSPATH' ) ) {
  die( '-1' );
}

$style =
$date =
$performance =
$el_class = '';

$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts ); // @codingStandardsIgnoreLine
$el_class = $this->getExtraClass( $el_class );
$p = $performance;
?>

<div
  class="vckit-countdown vckit-countdown-<?php echo esc_attr( $performance )?> vckit-countdown-<?php echo esc_attr( $style ) ?>"
  data-date="<?php echo esc_attr( $date ) ?>"
>
    <?php if ( 'p1' == $p ) { ?>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="dayAll"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="dayAllUnit"></span>
    </div>
  </div>
    <?php } elseif ( 'p2' == $p ) { ?>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="weekAll"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="weekAllUnit"></span>
    </div>
  </div>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="dtw"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="dtwUnit"></span>
    </div>
  </div>
    <?php } elseif ( 'p3' == $p ) { ?>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="monthAll"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="monthAllUnit"></span>
    </div>
  </div>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="wtm"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="wtmUnit"></span>
    </div>
  </div>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="dtw"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="dtwUnit"></span>
    </div>
  </div>
    <?php } elseif ( 'p4' == $p || 'p5' == $p ) { ?>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="year"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="yearUnit"></span>
    </div>
  </div>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="mty"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="mtyUnit"></span>
    </div>
  </div>
    <?php if ( 'p4' == $p ) {  ?>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="dtm"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="dtmUnit"></span>
    </div>
  </div>
    <?php } else { ?>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="wtm"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="wtmUnit"></span>
    </div>
  </div>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="dtw"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="dtwUnit"></span>
    </div>
  </div>
    <?php } ?>
    <?php } // End if(). ?>

  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="hour"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="hourUnit"></span>
    </div>
  </div>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="minute"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="minuteUnit"></span>
    </div>
  </div>
  <div class="vckit-countdown-val">
    <div class="vckit-countdown-val-number">
      <span class="second"></span>
    </div>
    <div class="vckit-countdown-val-unit">
      <span class="secondUnit"></span>
    </div>
  </div>

</div>
