<?php
/**
 * The default gallery 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;
 $arrows           =   $sk_data->arrows;
 $infinite         =   $sk_data->infinite;
 $swipe            =   $sk_data->swipe;
 $touchMove        =   $sk_data->touchMove;
 $speed            =   $sk_data->speed;
 $slides           =   $sk_data->slides;
 $thumbnail_number =   $sk_data->thumbnail_number;

 $default_gallery_config = json_encode([
   'autoplay' => $autoplay === 'true'? true: false,
   'autoplaySpeed' => $autoplaySpeed,
   'infinite' => $infinite === 'true'? true: false,
   'dots' => $dots === 'true'? true: false,
   'arrows' => $arrows === 'true'? true: false,
   'swipe'  => $swipe === 'true'? true: false,
   'speed'  => $speed,
   'touchMove' => $touchMove === 'true'? true: false,
   'fade'   => false,
   'lazyLoad' => 'ondemand',
   'slidesToShow' => 1,
   'asNavFor' => '.sk-slick-default-thumbs'
 ]);
?>

<?php if( $slides ) : ?>
<div class="sk-slick sk-slick-default sk-gallery-top" data-slick='<?php echo esc_attr( $default_gallery_config ); ?>'>
  <?php foreach( $slides as $item ): ?>
  <div class="sk-slick-item d-flex align-items-center elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
    <div class="sk-slick-item__container container">
      <div class="col-md-6 offset-md-1">
         <?php if( $item['title'] ): ?>
         <h1 class="sk-heading sk-wrap-lines"><?php echo wp_kses_post( $item['title'] ); ?></h1>
         <?php endif;?>

         <?php if( $item['subtitle'] ): ?>
         <h2 class="sk-subheading sk-wrap-lines"><?php echo wp_kses_post( $item['subtitle'] ); ?></h2>
         <?php endif;?>

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

         <?php
           if( $item['button_text'] ):
           $target = $item['button_link']['is_external'] ? 'target="_blank"' : '';
         ?>
         <div class="sk-button-container">
           <a href="<?php echo esc_url( $item['button_link']['url'] );?>" class="elementor-button sk-button elementor-animation-<?php echo esc_attr( $item['button_hover_animation'] ); ?>" <?php echo esc_html( $target );?>><?php echo esc_html( $item['button_text'] ); ?></a>
         </div>
         <?php endif; ?>
      </div>
    </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-slick sk-slick-default-thumbs" data-slick='{"slidesToShow": <?php echo esc_attr( $thumbnail_number ); ?>, "dots": false, "fade": false, "infinite": false, "lazyLoad": "ondemand", "arrows": true, "asNavFor": ".sk-gallery-top", "focusOnSelect": true, "responsive":[{"breakpoint": 640,"settings":{"slidesToShow": 3}}] }'>
  <?php
  foreach( $slides as $item ):
    $picture_url = $item['picture']['url'];
    if( $picture_url !== '' ):
      $thumbnail_url = $item['picture']['id'] == '' ? SK_PLACEHOLDER_IMG : wp_get_attachment_image_url( $item['picture']['id'], 'thumbnail' );
  ?>
  <div class="sk-slick-item d-flex align-items-center">
    <img src="<?php echo esc_url( $thumbnail_url );?>" data-src="<?php echo esc_url( $picture_url ); ?>" />
  </div>
  <?php
    endif;
  endforeach;
  ?>
</div>
<?php endif; ?>