<template lang="pug">
.o-slider
	.slick-slider.o-slider__slider(
		ref="slider"
		data-module="slickjs",
		:data-module-options="JSON.stringify(slickOptions)"
	)
		//@slot Each of elements put here will be a slide
		slot
			.slick-slide.relative.o-slider__slide(
				v-for="item in items"
				:data-caption="item.caption"
				:key="`slide${item.id}`"
				:ref="`slide${item.id}`"
				v-html="item.html"
			)

	//@slot Slot for the whole bottom section
	slot(name="bottom-section")
		.flex.justify-between.mt-6
			//@slot Slot for the caption element
			slot(name="caption")
				.small.italic.o-slider__caption
			//@slot Slot for the whole counter element
			slot(name="counter")
				.small.font-700.o-slider__counter
					//@slot Slot for counter index element
					slot(name="counter-index")
						span.o-slider__counter-index 1
					//@slot Slot for counter separator
					slot(name="counter-separator")
						|&nbsp;/&nbsp;
					//@slot Slot for counter total element
					slot(name="counter-total")
						span.o-slider__counter-total 1


</template>

<script>
import $ from 'jquery'
import { addInitialPluginsAndHydrate } from '@/utils/conditioner'

export default {
	props: {
		/** Array of slides */
		items: {
			type: Array,
			default: () => [],
		},
		/** Slick options that will be passed to $.slick() - Ref: https://kenwheeler.github.io/slick/#settings */
		slickOptions: {
			type: Object,
			default: () => ({}),
		},
		/** Slick options that are not string can be put here */
		slickOptionsHidden: {
			type: Object,
			default: () => ({}),
		},
	},
	created() {
		this.$slots.default?.forEach(vnode => {
			vnode?.elm?.classList?.add('o-slider__slide')
		})
	},
	mounted() {
		const { $refs, slickOptionsHidden } = this
		$(this.$refs.slider).data('moduleOptionsHidden', {
			onAfterChange: () => {},
			...slickOptionsHidden,
		})

		addInitialPluginsAndHydrate(this.$el)
	},
}
</script>
<docs>
```jsx
const items = [
	{
		id: 0,
		html: '<div class="py-4 px-4 absolute inset-y-0 left-0 w-full bg-primary text-white">Slide 1 html</div>',
		caption: 'This is the caption for slide 1'
	},
	{
		id: 1,
		html: '<img class="w-full" src="https://unsplash.it/800/250" alt/>',
		caption: 'This is the caption for slide 2'
	},
]

<Slider
	:items="items"
/>

<hr>

<!-- Example slider with slots -->
<Slider>
	<img class="w-full" data-caption="<strong>html caption 1</strong>" src="https://unsplash.it/800/250" alt/>
	<img class="w-full" data-caption="standard caption 2" src="https://unsplash.it/800/250" alt/>
</Slider>

```
</docs>
