<?php

/***
 carousel-image1
 carousel-image2
 
 Title
 carousel-image__title
 */


$class_name = 'carousel-image';
$id = isset($args['id']) ? $args['id'] : '';
$class_card =  $class_name .'-card';
$full_name = $class_name .$id;
$carousel = get_field($full_name);


if ($carousel) : ?>
    <section class=" bg-gray <?php echo $class_name; ?>  transition-scroll ">
        <?php
        while (have_rows($full_name)) : the_row();
            $title = get_sub_field($class_name .'__title'); ?>
            <?php if ($title) : ?>
                <div class="container">
                    <header class="<?php echo $class_name ?>__title co-blue">
                        <h2>
                            <?php echo $title ?>
                        </h2>
                    </header>
                </div>
            <?php endif ?>
            <div class="position-relative container <?php echo $class_name ?>__container-card">
                <div class="js-<?php echo $class_name; ?> container mb-0">
                    <?php while (have_rows($class_name .'-card')) : the_row();
                        get_template_part('cards/'. $class_card, NULL, [
                            'class_name' => $class_name,
                            'full_name' => $full_name,
                        ]);
                    endwhile; ?>
                </div>
                <div class="<?php echo $class_name; ?>__carousel-arrows carousel-arrows">
                    <span class="js_gn_carousel__prev_arrow carousel-arrows__prev">
                        <i class="carousel-arrows__arrow arrow-left">
                            <svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M23.34 3.74001L19.8 0.200012L0 20L19.8 39.8L23.34 36.26L7.08 20L23.34 3.74001Z" fill="#276fbf" />
                            </svg>
                        </i>
                    </span>
                    <span class="js_gn_carousel__next_arrow carousel-arrows__next">
                        <i class="carousel-arrows__arrow arrow-right">
                            <svg width="25" height="40" viewBox="0 0 25 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.76001 4.24L16.52 20L0.76001 35.76L5.00001 40L25 20L5.00001 0L0.76001 4.24Z" fill="#276fbf" />
                            </svg>
                        </i>
                    </span>
                </div>
            </div>
        <?php endwhile; ?>
    </section>
<?php endif ?>
<?php

<?php
extract($args);
$id = isset($args['id']) ? $args['id'] : '';
$class_card = $class_name . '-card'; 
$image = get_sub_field($class_card . '__image'.$id);
?>

<div class=" col-md-4 col-lg-3 px-2 align-items-stretch <?php echo $class_card ?> ">
    <div class="<?php echo $class_card ?>__content px-3 py-5  w-100">
        <?php if ($image): ?>
            <figure class="<?php echo $class_card ?>__image">
                <img class="w-100 <?php echo $class_card ?>__image " src="<?php echo esc_url($image['url']) ?>"
                    alt="<?php echo esc_attr($image['alt']) ?>">
            </figure>
        <?php endif ?>
    </div>
</div>

import { GnCarousel } from '../libraries/slick'
import { responsiveSliderNumL, BREAKPOINTS } from "../libraries/utils";

const numbersSlider = responsiveSliderNumL (3);

const SELECTORS = {
  component: '.js-carousel-image'
}

const OPTIONS = {
  dots: true,
  infinite: true,
  speed: 300,
  slidesToScroll: numbersSlider.xs,
  slidesToShow: numbersSlider.xs,

  responsive: [
    {
      breakpoint: BREAKPOINTS.get('s'),
      settings: {
        slidesToScroll: numbersSlider.s,
        slidesToShow: numbersSlider.s,
      }
    },
    {
      breakpoint: BREAKPOINTS.get('m'),
      settings: {
        slidesToScroll: numbersSlider.m - 1,
        slidesToShow: numbersSlider.m -1,
      }
    },
    {
      breakpoint: BREAKPOINTS.get('l'),
      settings: {
        slidesToScroll: numbersSlider.l,
        slidesToShow: numbersSlider.l,
      }
    },
  ]
}

const sliderInstance = [...document.querySelectorAll(SELECTORS.component)]

if (sliderInstance) {
  sliderInstance.forEach(slider => {
    const parent = slider.parentElement
    const slickInstance = new GnCarousel(slider, OPTIONS, parent)

    slickInstance.initCarousel()
  })
}

.carousel-image-card{
    &__image{
        border-radius: rem(6px);
        @include fluid-aspect(12 12, 'img');
    
    }
}