<?php
/**
 * The expandable carousel template
 * If you want to override this template by your custom template in the theme folder,
 * just create the 'sliderkits' folder in the theme folder,
 * then, copy this file to sliderkits folder.
 * @version 1.0.0
 * @package SliderKits
 */

 $autoplay         =   $sk_data->autoplay;
 $autoplaySpeed    =   $sk_data->autoplaySpeed;
 $dots             =   $sk_data->dots;
 $infinite         =   $sk_data->infinite;
 $swipe            =   $sk_data->swipe;
 $touchMove        =   $sk_data->touchMove;
 $speed            =   $sk_data->speed;
 $slides           =   $sk_data->slides;

 $carousel_popup_config = json_encode([
   'autoplay' => $autoplay === 'true'? true: false,
   'autoplaySpeed' => $autoplaySpeed,
   'infinite' => $infinite === 'true'? true: false,
   'dots' => $dots === 'true'? true: false,
   'swipe'  => $swipe === 'true'? true: false,
   'speed'  => $speed,
   'touchMove' => $touchMove === 'true'? true: false,
   'fade'   => false,
   'lazyLoad' => 'ondemand',
   'variableWidth' => true,
   'initialSlide' => 1,
   'centerMode' => true,
   'focusOnSelect' => true,
   'responsive' => [
     [
       "breakpoint" => 767,
       "settings" => [
         "variableWidth" => false,
         "centerMode" => false,
         "initialSlide" => 0
       ]
     ]
   ]
 ]);
?>

<?php if( $slides ) : ?>
<div class="sk-slick sk-slick-carousel-popup" data-slick='<?php echo esc_attr( $carousel_popup_config );?>'>
  <?php
    foreach( $slides as $item ):
      $rand_id =  $item['_id'];
  ?>
  <div class="sk-slick-item d-flex align-items-end pb-5 pb-md-0 sk-popup-<?php echo esc_attr( $rand_id );?> elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
    <div class="sk-slick-item__container container">
      <div class="col-md-8 offset-lg-1 offset-sm-0 mb-5">
          <?php if( $item['title'] ): ?>
          <h1 class="sk-heading sk-wrap-lines"><span><?php echo wp_kses_post( $item['title'] ); ?></span></h1>
          <?php endif; ?>

          <?php if( $item['paragraph'] ): ?>
          <div class="sk-content">
             <?php echo wp_kses_post( $item['paragraph'] ); ?>
          </div>
          <?php endif;?>
      </div>

      <?php if( $item['button_text'] ):?>
      <div class="col-md-3"><a href="javascript:;" data-slide="sk-popup-<?php echo esc_attr( $rand_id );?>" class="sk-learn-more-circle" target="_self"><?php echo esc_html( $item['button_text'] ); ?> &rarr;</a></div>
      <?php endif; ?>
    </div>

    <div class="sk-slick-item__overlay"></div>
    <?php
     $picture_url = $item['picture']['url'];
     if( $picture_url !== '' ):
    ?>
    <div class="sk-slick-item__bg" style="background-image: url(<?php echo esc_url( $picture_url ); ?>);"></div>
    <?php endif; ?>
  </div>
  <?php endforeach; ?>
</div>
<div class="sk-fullscreen-popup"></div>
<?php endif;?>