glide-slider — Wrapper kolem Glide.js — šipky, bullets, autoplay, breakpoints. Auto-init přes data-attribute.

// ─── Configurable variables (override before @import) ──────────────────
$cgui-glide-slider-arrow-size:           64px !default;
$cgui-glide-slider-arrow-bg:             #fff !default;
$cgui-glide-slider-arrow-color:          $cgui-color-text !default;
$cgui-glide-slider-arrow-bg-hover:       $cgui-color-primary !default;
$cgui-glide-slider-arrow-color-hover:    #fff !default;
$cgui-glide-slider-arrow-shadow:         0 2px 8px rgba(0, 0, 0, 0.1) !default;
$cgui-glide-slider-arrow-offset:         -32px !default;

$cgui-glide-slider-bullet-size:          13px !default;
$cgui-glide-slider-bullet-gap:           6px !default;
$cgui-glide-slider-bullet-color:         $cgui-color-border !default;
$cgui-glide-slider-bullet-active-color:  $cgui-color-primary !default;
$cgui-glide-slider-bullets-margin-top:   32px !default;

$cgui-glide-slider-track-padding:        0 !default;
// ───────────────────────────────────────────────────────────────────────

.glide-slider {
	position: relative;

	&__track {
		overflow: hidden;
		padding: $cgui-glide-slider-track-padding;
	}

	&__slides {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		will-change: transform;
	}

	&__slide {
		flex-shrink: 0;
	}

	&__arrows {
		position: absolute;
		top: 50%;
		left: $cgui-glide-slider-arrow-offset;
		right: $cgui-glide-slider-arrow-offset;
		display: flex;
		justify-content: space-between;
		pointer-events: none;
		transform: translateY(-50%);
		z-index: 2;
	}

	&__arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: $cgui-glide-slider-arrow-size;
		height: $cgui-glide-slider-arrow-size;
		background: $cgui-glide-slider-arrow-bg;
		color: $cgui-glide-slider-arrow-color;
		border: none;
		border-radius: 50%;
		box-shadow: $cgui-glide-slider-arrow-shadow;
		cursor: pointer;
		pointer-events: auto;
		transition: background 0.15s, color 0.15s;

		&:hover,
		&:focus {
			background: $cgui-glide-slider-arrow-bg-hover;
			color: $cgui-glide-slider-arrow-color-hover;
		}

		&[disabled] {
			opacity: 0.4;
			cursor: not-allowed;
		}

		svg {
			width: 22px;
			height: 22px;
		}
	}

	&__bullets {
		display: flex;
		justify-content: center;
		gap: $cgui-glide-slider-bullet-gap;
		margin-top: $cgui-glide-slider-bullets-margin-top;
	}

	&__bullet {
		width: $cgui-glide-slider-bullet-size;
		height: $cgui-glide-slider-bullet-size;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: $cgui-glide-slider-bullet-color;
		cursor: pointer;
		transition: background 0.15s;

		&--active,
		&.glide__bullet--active {
			background: $cgui-glide-slider-bullet-active-color;
		}
	}
}

// Glide Slider — auto-init pro [data-glide-slider]. Wraps Glide.js.
// Vyžaduje: npm install @glidejs/glide
//   import Glide from '@glidejs/glide';

import Glide from '@glidejs/glide';

const instances = new WeakMap();

function init(root) {
	if (instances.has(root)) return instances.get(root);

	const perView = parseInt(root.dataset.perView || '1', 10);
	const gap = parseInt(root.dataset.gap || '16', 10);
	const autoplay = root.dataset.autoplay ? parseInt(root.dataset.autoplay, 10) : false;
	const loop = root.dataset.loop !== 'false';

	let breakpoints = null;
	if (root.dataset.breakpoints) {
		try {
			breakpoints = JSON.parse(root.dataset.breakpoints);
		} catch (e) {
			console.warn('[glide-slider] invalid breakpoints JSON', e);
		}
	}

	const options = {
		type: loop ? 'carousel' : 'slider',
		perView,
		gap,
		autoplay,
		hoverpause: !!autoplay,
		...(breakpoints ? { breakpoints } : {}),
	};

	const glide = new Glide(root, options);
	glide.mount();

	instances.set(root, glide);
	return glide;
}

function destroy(root) {
	const glide = instances.get(root);
	if (glide) {
		glide.destroy();
		instances.delete(root);
	}
}

export function initAll(scope = document) {
	scope.querySelectorAll('[data-glide-slider]').forEach(init);
}

export function destroyAll(scope = document) {
	scope.querySelectorAll('[data-glide-slider]').forEach(destroy);
}

// Auto-init
if (typeof document !== 'undefined') {
	if (document.readyState !== 'loading') {
		initAll();
	} else {
		document.addEventListener('DOMContentLoaded', () => initAll());
	}
}

export { init, destroy };