#parse("${templatePath}/header.vm")

<div>
	<agov-darkmode></agov-darkmode>
	<div class="dark:bg-black p-3">
		<div>
			<agov-checkbox
					id="checky"
					data-value="rokoko"
					data-id="rokoko"
					data-name="checkbox">
			</agov-checkbox>
			<agov-checkbox
					data-value="polycam"
					data-id="polycam"
					data-name="checkbox"
					data-checked="true">
			</agov-checkbox>
		</div>
		<agov-radio
				data-value="blender"
				data-id="blender"
				data-name="checkbox"
				data-checked="true">
		</agov-radio>

		<agov-radio
				data-value="c4d"
				data-id="c4d"
				data-name="checkbox">
		</agov-radio>

		<agov-radio
				data-value="maya"
				data-id="maya"
				data-name="checkbox">
		</agov-radio>


		<agov-button
				data-name="test"
				data-value="test"
				data-id="normal"
				data-label="Continue"
				data-type="submit"
				data-validate="false"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-label="Continue"
				data-icon="left"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-label="Continue"
				data-icon="right"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-label="Continue"
				data-icon="right"
				data-disabled="true"
				class="my-4 block">
		</agov-button>

		<agov-button
				data-style="secondary"
				data-label="Continue"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-style="secondary"
				data-label="Continue"
				data-icon="left"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-style="secondary"
				data-label="Continue"
				data-icon="right"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-style="secondary"
				data-label="Continue"
				data-icon="right"
				data-disabled="true"
				class="my-4 block">
		</agov-button>

		<agov-button
				data-style="frameless"
				data-label="Continue"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-style="frameless"
				data-label="Continue"
				data-icon="left"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-style="frameless"
				data-label="Continue"
				data-icon="right"
				class="my-4 block">
		</agov-button>
		<agov-button
				data-style="frameless"
				data-label="Continue"
				data-icon="right"
				data-disabled="true"
				class="my-4 block">
		</agov-button>

		<div class="w-96">
			<agov-input
					data-label="Your email"
					data-supporting_text="Supporting text"
					data-placeholder="Amazing placeholder"
					data-id="input"
					data-name="test"
					data-value="value"
					data-type="text"
					data-autofocus="true"
					data-left_icon="fa-envelope"
					data-right_icon="fa-circle-xmark"
			></agov-input>

			<agov-input
					data-label="Your email"
					data-supporting_text="Supporting text"
					data-placeholder="Amazing placeholder"
					data-id="input"
					data-name="test"
					data-value="value"
					data-type="text"
					data-autofocus="true"
					data-left_icon=""
					data-right_icon="fa-circle-xmark"
			></agov-input>

			<agov-input
					data-label="Your email"
					data-supporting_text="Supporting text"
					data-placeholder="Amazing placeholder"
					data-id="input"
					data-name="test"
					data-value="value"
					data-type="text"
					data-autofocus="true"
					data-left_icon=""
					data-right_icon=""
			></agov-input>
		</div>
	</div>

	<i class="fa-solid fa-acorn"></i>
	<i class="fa-regular fa-acorn"></i>

	<p class="text-space-blue">space-blue</p>
	<p class="text-indigo">text-indigo</p>
	<p class="text-violet">violet</p>
	<p class="text-electric-indigo">electric-indigo</p>
	<p class="text-lilac">lilac</p>
	<p class="text-indigo-light">indigo-light</p>
	<p class="text-violet">violet</p>
	<p class="text-lavender-blush">lavender-blush</p>

	<p class="text-true-blue">true-blue</p>
	<p class="text-sky-blue">sky-blue</p>
	<p class="text-royal-blue">royal-blue</p>
	<p class="text-light-blue">light-blue</p>

	<p class="text-teal">teal</p>
	<p class="text-turquoise">turquoise</p>
	<p class="text-mint">mint</p>
	<p class="text-aquamarine">aquamarine</p>

	<p class="text-ash">ash</p>
	<p class="text-silver">silver</p>
	<p class="text-platinum">platinum</p>
	<p class="text-smoke">smoke</p>

	<p class="text-success dark:text-dark-success">success</p>
	<p class="text-error dark:text-dark-error">error</p>
	<p class="text-warning dark:text-dark-warning">warning</p>
	<p class="text-info dark:text-dark-info">info</p>

	<h1 class="text-h1 font-header">H1 Title</h1>
	<h2 class="text-h2 font-header">H2 Title</h2>
	<h3 class="text-h3 font-header">H3 Title</h3>
	<h4 class="text-h4 font-header">H4 Title</h4>
	<h5 class="text-h5 font-header">H5 Title</h5>
	<h6 class="text-h6 font-header">H6 Title</h6>

	<p class="text-body-l font-body">Whereas recognition of the inherent dignity</p>
	<p class="text-body-l font-body-semi">Whereas recognition of the inherent dignity</p>
	<p class="text-body-l font-body-bold">Whereas recognition of the inherent dignity</p>
	<p class="text-body-m font-body">Whereas recognition of the inherent dignity</p>
	<p class="text-body-m font-body-semi">Whereas recognition of the inherent dignity</p>
	<p class="text-body-m font-body-bold">Whereas recognition of the inherent dignity</p>
	<p class="text-body-s font-body">Whereas recognition of the inherent dignity</p>
	<p class="text-body-s font-body-semi">Whereas recognition of the inherent dignity</p>
	<p class="text-body-s font-body-bold">Whereas recognition of the inherent dignity</p>
</div>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		document.dispatchEvent(new Event('indexLoaded'));
	});
</script>
#parse("${templatePath}/footer.vm")