<template lang="pug">
.o-accordion.o-collapselist
	h2.h5.h4-sm.mb-1(v-if="title") {{ title }}
	div(data-module="accordion", :id="id")
		.panel.relative.o-collapselist__item(
			v-for="(item, index) in items"
		)
			.absolute.inset-0.w-full.h-full.border.border-b.border-t.opacity-0.o-collapselist__indicator
			.o-collapselist__head(:id="`${id}-head-panel${item.id}`")
				.border-t.text-primary.o-collapselist__title
					a.flex.items-start.pr-4.py-4.no-underline.text-inherit.focus-text-inherit.relative.o-collapselist__title-link(
						:class="[ ((!isFirstItemExpanded && index == 0) || index > 0) && 'collapsed' ]"
						data-toggle="collapse"
						:data-target="`#${id}-panel${item.id}`"
						href="#"
						role="button"
						:aria-expanded="(!isFirstItemExpanded && index == 0) ? 'true' : 'false'"
						:aria-controls="`${id}-panel${item.id}`"
						@click.prevent=""
					)
						//@slot Slot for collapsed icon
						slot(name="icon-collapsed")
							Icon.hidden.u-db-on-collapsed.mr-3(name="plus24", path="/spritemap.svg")
						//@slot Slot for expanded icon
						slot(name="icon-expanded")
							Icon.u-dn-on-collapsed.mr-3(name="minus24", path="/spritemap.svg")
						h3.b-fsbodyregular {{ item.title }}
			.collapse.relative.o-collapselist__panel(
				:class="[ (isFirstItemExpanded && index == 0) && 'show' ]"
				:id="`${id}-panel${item.id}`"
				:aria-labelledby="`${id}-head-panel${item.id}`"
				:data-parent="isItemIndependent ? undefined : `#${id}`"
			)
				.pb-5.o-collapselist__body
					.o-richtext.o-collapselist__content(v-html="item.html")
</template>

<script>
import $ from 'jquery'
import 'bootstrap/js/src/collapse'

export default {
	components: {
		Icon: () => import(/* webpackChunkName: "Icon" */ '@/components/Icon'),
	},
	props: {
		/** Unique identifier for a collapselist */
		id: {
			type: String,
			required: true,
		},
		/** Array of the collapse list item */
		items: {
			type: Array,
			default: () => [],
		},
		/** Title of the collapse list */
		title: {
			type: String,
			default: '',
		},
		/** If set to `true`, opening an item will collapse the others */
		isItemIndependent: Boolean,

		/** If set to `true`, first item will be expanded */
		isFirstItemExpanded: Boolean,
	},
	mounted() {
		$(this.$el)
			.find('.collapse')
			.on('show.bs.collapse', ev => {
				$(ev.currentTarget)
					.closest('.panel')
					.addClass('active')
			})
			.on('hide.bs.collapse', ev => {
				$(ev.currentTarget)
					.closest('.panel')
					.removeClass('active')
			})
	},
}
</script>
<docs>
```jsx
const arr = [
	{id: 1, title: 'Accordion title 1', html: '<p>This is some html for Accordion 1</p>'},
	{id: 2, title: 'Accordion title 2', html: '<p>This is some html for Accordion 2</p>'},
	{id: 3, title: 'Accordion title 3', html: '<p>This is some html for Accordion 3</p>'}
]

const arr2 = [
	{id: 4, title: 'Accordion title 1', html: '<p>This is some html for Accordion 1</p>'},
	{id: 5, title: 'Accordion title 2', html: '<p>This is some html for Accordion 2</p>'},
	{id: 6, title: 'Accordion title 3', html: '<p>This is some html for Accordion 3</p>'}
]

<Accordion
	id="collapselist"
	:items="arr"
	title="Accordion title"
	isFirstItemExpanded
/>

<hr>

<Accordion
	id="collapselist-independent"
	:items="arr2"
	title="Independent"
	is-item-independent
/>
```
</docs>
