function segmentsSliderWrapCarousel( segmentsSlider ) {
	const segment = segmentsSlider.querySelector( '.segmento' );
	const container = segment.parentNode;
	let carousel = document.createElement( 'div' );
	carousel.classList.add( 'carousel' );
	carousel.classList.add( 'carousel-fade' );
	carousel.classList.remove( 'carousel-fade' );
	carousel.classList.add( 'slide' );
	const uniqid = Math.floor( Math.random() * ( 999 - 100 + 1 ) + 100 );
	const carouselId = 'carouselSegments' + uniqid;
	carousel.setAttribute( 'id', carouselId );
	carousel.setAttribute( 'data-bs-ride', 'carousel' );
	container.insertBefore(
		carousel,
		segment
	);
	const indicators = document.createElement( 'div' );
	indicators.classList.add( 'carousel-indicators' );
	let inner = document.createElement( 'div' );
	inner.classList.add( 'carousel-inner' );
	carousel.appendChild( indicators );
	carousel.appendChild( inner );

	let slide = 0;
	let active = true;

	document
		.querySelectorAll(
			'.segmento'
		)
		.forEach( function ( segment ) {
			segment.classList.add( 'carousel-item' );
			if ( active ) {
				segment.classList.add( 'active' );
			}
			inner.appendChild( segment );
			const title = segment.querySelector( 'p' );
			title.remove();
			indicator = document.createElement( 'button' );
			indicator.setAttribute( 'data-bs-target', '#' + carouselId );
			indicator.setAttribute( 'data-bs-slide-to', slide );
			if ( active ) {
				indicator.classList.add( 'active' );
				indicator.setAttribute( 'aria-current', 'true' );
				active = false;
			}
			slide++;
			const span = document.createElement( 'div' );
			const imageWrapper = document.createElement( 'div' );
			title.querySelector( 'img' ).removeAttribute( 'loading' );
			imageWrapper.appendChild( title.querySelector( 'img' ) );
			span.innerHTML = title.innerHTML;
			indicator.appendChild( imageWrapper );
			indicator.appendChild( span );
			indicators.appendChild( indicator );

			segment
				.querySelectorAll(
					'li'
				)
				.forEach( function ( example ) {
					const exampleSpan = document.createElement( 'div' );
					const exampleImageWrapper = document.createElement( 'div' );
					exampleImageWrapper.appendChild( example.querySelector( 'img' ) );
					exampleSpan.innerHTML = example.innerHTML;
					example.innerHTML = '';
					example.appendChild( exampleImageWrapper );
					example.appendChild( exampleSpan );
				} );
		} );
}
function segmentsSlidersWrapCarousel() {
	document
		.querySelectorAll(
			'.segmentos'
		)
		.forEach( function ( segmentsSlider ) {
			segmentsSliderWrapCarousel( segmentsSlider );
		} );
	( function ( $ ) {
		$( '.segmentos .carousel-indicators' ).slick( {
			infinite: false,
			slidesToShow: 7,
			slidesToScroll: 1,
			focusOnSelect: true,
			responsive: [
				{
					breakpoint: 600,
					settings: {
						slidesToShow: 4,
					},
				},
			],
		} );
	} )( jQuery );
}
const segmentsSlidersWrapCarouselPrevHandler = window.onload;
window.onload = function () {
	if ( segmentsSlidersWrapCarouselPrevHandler ) {
		segmentsSlidersWrapCarouselPrevHandler();
	}
	segmentsSlidersWrapCarousel();
};
// (function ($) {
// 	const ninodemSegmentsSlider = {
// 		init: function () {
// 			const self = this;
// 			$('.segmentos').each(function () {
// 				self.setup($(this));
// 				self.sliders($(this));
// 			});
// 		},

// 		setup: function ($segmentsSlider) {
// 			const $segment = $segmentsSlider.find('.segmento').first();
// 			if (!$segment.length) return;

// 			const $container = $segment.parent();
// 			const $carousel = $('<div>', {
// 				class: 'carousel slide',
// 				id: 'carouselSegments' + (Math.floor(Math.random() * 900) + 100),
// 				'data-bs-ride': 'carousel'
// 			});

// 			$container.prepend($carousel);

// 			const $indicators = $('<div>', { class: 'carousel-indicators' });
// 			const $inner = $('<div>', { class: 'carousel-inner' });

// 			$carousel.append($indicators, $inner);

// 			let slide = 0;
// 			let active = true;

// 			$segmentsSlider.find('.segmento').each(function () {
// 				const $segment = $(this);
// 				$segment.addClass('carousel-item');
// 				if (active) {
// 					$segment.addClass('active');
// 					active = false;
// 				}
// 				$inner.append($segment);

// 				const $title = $segment.find('p').first();
// 				if ($title.length) {
// 					$title.remove();

// 					const $indicator = $('<button>', {
// 						'data-bs-target': '#' + $carousel.attr('id'),
// 						'data-bs-slide-to': slide++,
// 						class: slide === 1 ? 'active' : ''
// 					});

// 					if (slide === 1) {
// 						$indicator.attr('aria-current', 'true');
// 					}

// 					const $span = $('<div>').html($title.html());
// 					const $imageWrapper = $('<div>');

// 					const $img = $title.find('img');
// 					if ($img.length) $img.removeAttr('loading');
// 					$imageWrapper.append($img);

// 					$indicator.append($imageWrapper, $span);
// 					$indicators.append($indicator);
// 				}

// 				$segment.find('li').each(function () {
// 					const $example = $(this);
// 					const $exampleSpan = $('<div>').html($example.html());
// 					const $exampleImageWrapper = $('<div>');

// 					const $img = $example.find('img');
// 					if ($img.length) $exampleImageWrapper.append($img);

// 					$example.empty().append($exampleImageWrapper, $exampleSpan);
// 				});
// 			});
// 		},

// 		sliders: function ($segmentsSlider) {
// 			$segmentsSlider.find('.carousel-indicators').slick({
			// infinite: false,
			// slidesToShow: 7,
			// slidesToScroll: 1,
			// focusOnSelect: true,
			// responsive: [
			// 	{
			// 		breakpoint: 600,
			// 		settings: {
			// 			slidesToShow: 4,
			// 		},
			// 	},
			// ],
// 			});
// 		},
// 	};

// 	ninodemSegmentsSlider.init();
// })(jQuery);
