<script setup>
const volume = ref(25);
const airplaneMode = ref(false);
const toggle = ref(false);
const group = ref('center');
const burgerIngredients = ref(['tomato', 'cheese']);
</script>

<template>
	<div class="presentation">
		<div class="container">
			<button class="vl-button">
				Button
			</button>
		</div>

		<div class="container">
			<Transition>
				<VlDropdown>
					<button>
						Button
					</button>
					<button>
						Button
					</button>
					<button>
						Button
					</button>
				</VlDropdown>
			</Transition>
		</div>

		<div class="container">
			<div>
				{{ group }}
				<VlToggleGroup v-model="group" type="single" :defaultValue="group" aria-label="Text alignment">
					<VlToggleGroupItem aria-label="Left aligned" value="left">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
							<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M4 6h16M4 12h10M4 18h14" />
						</svg>
					</VlToggleGroupItem>

					<VlToggleGroupItem aria-label="Center aligned" value="center">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
							<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M4 6h16M8 12h8M6 18h12" />
						</svg>
					</VlToggleGroupItem>

					<VlToggleGroupItem aria-label="Right aligned" value="right">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
							<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M4 6h16m-10 6h10M6 18h14" />
						</svg>
					</VlToggleGroupItem>
				</VlToggleGroup>
			</div>
			<div>
				{{ burgerIngredients }}
				<VlToggleGroup v-model="burgerIngredients" type="multiple" :defaultValue="burgerIngredients" aria-label="Burger ingredients">
					<VlToggleGroupItem aria-label="Cheese" value="cheese">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
							<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
								<path d="M4.519 20.008L21 20v-3.5a2 2 0 1 1 0-4V9H4.278" />
								<path
									d="m21 9l-9.385-4.992c-2.512.12-4.758 1.42-6.327 3.425C3.865 9.253 3 11.654 3 14.287c0 2.117.56 4.085 1.519 5.721M15 13v.01M8 13v.01M11 16v.01" />
							</g>
						</svg>
					</VlToggleGroupItem>

					<VlToggleGroupItem aria-label="Tomato" value="tomato">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 48 48">
							<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
								<path
									d="M24 44c11.046 0 20-7.387 20-16.5c0-6.442-4.475-11.799-11-14.516L29.5 14.5L30 20l-6.5-2l-6.5 2v-5.5l-3-1.516C8.022 15.837 4 21.393 4 27.5C4 36.613 12.954 44 24 44Z" />
								<path
									d="m23.5 4l3.809 5.117L36 9.91l-6.337 4.573L31.5 21l-8-3l-8 3l1.837-6.517L11 9.91l8.691-.793L23.5 4Z" />
							</g>
						</svg>
					</VlToggleGroupItem>

					<VlToggleGroupItem aria-label="Onions" value="onion">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32">
							<path fill="currentColor"
								d="M12.74 2.458c0-1.333 1.658-1.981 2.553-.959l1.182 1.354L17.657 1.5c.895-1.023 2.553-.375 2.553.958v1.83c0 .738.44 1.405 1.136 1.712c4.464 1.892 7.604 6.325 7.604 11.488c0 6.076-4.349 11.146-10.11 12.25v.01c0 .69-.56 1.25-1.25 1.25h-2.16c-.69 0-1.25-.56-1.25-1.25v-.005C8.458 28.632 4 23.438 4 17.478c0-5.166 3.143-9.589 7.608-11.48a1.86 1.86 0 0 0 1.132-1.7v-1.84Zm2 1.449v.39a3.86 3.86 0 0 1-2.346 3.54l-.004.002c-.184.077-.364.16-.542.248c-1.96 2.085-3.118 5.341-3.118 8.84c0 5.31 2.645 9.753 6.153 10.805c-1.346-2.014-2.063-6.514-2.063-10.814c0-3.76.5-7.21 1.37-9.44l.75.29c-.82 2.11-1.31 5.53-1.31 9.15c0 3.03.33 5.88.94 8.02c.552 1.949 1.2 2.82 1.69 3.022c.147.003.295.003.441 0c.489-.203 1.137-1.074 1.689-3.022c.6-2.14.94-4.98.94-8.02c0-3.61-.49-7.03-1.31-9.15l.75-.29c.87 2.24 1.37 5.68 1.37 9.44c-.007 4.3-.72 8.801-2.064 10.814c3.508-1.05 6.154-5.494 6.154-10.804c0-3.495-1.155-6.746-3.109-8.832a10.358 10.358 0 0 0-.56-.257l-.012-.005a3.874 3.874 0 0 1-2.339-3.546v-.381l-.635.726a1.456 1.456 0 0 1-2.186.016l-.006-.007l-.643-.735ZM9.67 9.52A10.437 10.437 0 0 0 6 17.478c0 3.797 2.18 7.24 5.335 9.08c-.365-.372-.71-.786-1.035-1.24c-1.61-2.25-2.49-5.23-2.49-8.39c0-2.728.67-5.326 1.86-7.407Zm11.817 17.167a10.474 10.474 0 0 0 5.463-9.2c0-3.176-1.416-6.025-3.649-7.947c1.184 2.078 1.849 4.668 1.849 7.387c0 3.16-.88 6.14-2.49 8.39a10.42 10.42 0 0 1-1.173 1.37Z" />
						</svg>
					</VlToggleGroupItem>
				</VlToggleGroup>
			</div>
		</div>

		<div class="container">
			<div style="display: flex; gap: 6px 0; flex-direction: column;">
				<div style="display: flex;">
					<label for="airplane-mode" style=" margin-right: 8px;">Airplane mode</label>
					<VlToggleSwitch :checked="airplaneMode" v-model="airplaneMode" id="airplane-mode" />
				</div>
				<div style="display: flex;">
					<label for="wifi" style=" margin-right: 8px;">Wifi</label>
					<VlToggleSwitch :checked="!airplaneMode" :disabled="(airplaneMode) ? true : false" id="wifi" />
				</div>
			</div>
		</div>

		<div class="container">
			<div>
				<label for="Volume">Volume: {{ volume }}</label>
				<VlSlider :value="volume" v-model="volume" id="Volume" :step="1" :max="100" />
			</div>
			<VlSlider label="Volume" :step="1" :min="0" :max="10" />
			<VlSlider label="Volume" :value="1" :min="0" :max="9" :step="3" />
		</div>

		<div class="container">
			<VlAccordion type="single" defaultValue="item-1">
				<VlAccordionItem value="item-1">
					<VlAccordionTrigger>
						Section 1
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
							<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="m6 9l6 6l6-6" />
						</svg>
					</VlAccordionTrigger>
					<VlAccordionContent>
						Content for section 1
					</VlAccordionContent>
				</VlAccordionItem>
				<VlAccordionItem value="item-2">
					<VlAccordionTrigger>
						Section 2
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
							<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="m6 9l6 6l6-6" />
						</svg>
					</VlAccordionTrigger>
					<VlAccordionContent>
						Content for section 2
					</VlAccordionContent>
				</VlAccordionItem>
				<VlAccordionItem value="item-3">
					<VlAccordionTrigger>
						Section 3
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
							<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="m6 9l6 6l6-6" />
						</svg>
					</VlAccordionTrigger>
					<VlAccordionContent>
						Content for section 3
					</VlAccordionContent>
				</VlAccordionItem>
				<VlAccordionItem value="item-4">
					<VlAccordionTrigger>
						Section 4
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
							<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="m6 9l6 6l6-6" />
						</svg>
					</VlAccordionTrigger>
					<VlAccordionContent>
						Content for section 4
					</VlAccordionContent>
				</VlAccordionItem>
			</VlAccordion>
		</div>

		<div class="container">
			<div>
				{{ toggle }}
				<VlToggle v-model="toggle" aria-label="Toggle italic">
					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
						<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
							d="M11 5h6M7 19h6m1-14l-4 14" />
					</svg>
				</VlToggle>
			</div>
		</div>
	</div>
</template>

<style scoped>
.presentation {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	min-height: calc(100vh - 24px);
}

.container {
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	width: 420px;
	height: 275px;
	background: #121314;
	border-radius: 12px;
	border: 1px solid #232425;
	box-shadow: 0px 0px 12px #00000012;
}</style>