package testcomplexattributes

templ ComplexAttributes() {
	<div
		x-data="{darkMode: localStorage.getItem('darkMode') || localStorage.setItem('darkMode', 'system')}"
		x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))"
		:class="{'dark': darkMode === 'dark' || (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)}"
	></div>
	<div x-data="{ count: 0 }">
		<button
			x-on:click="count++"
		>Increment</button>
		<span x-text="count"></span>
	</div>
	<div x-data="{ count: 0 }">
		<button
			@click="count++"
		>Increment</button>
		<span x-text="count"></span>
	</div>
}