---
import Button from 'components/global/Button.astro'
import Input from 'components/global/Input.astro'
import MainLayout from 'layouts/MainLayout.astro'
import DaoFactory from 'models/DaoFactory'

const dao = DaoFactory.get('project')
const res = await dao.create({
	name: 'caca'
})
console.log(res)
---

<MainLayout title="Dzeio - Website Template">
	<main class="container flex flex-col justify-center items-center h-screen gap-6">
		<h1 class="text-8xl text-center">Dzeio Astro Template</h1>
		<h2 class="text-2xl text-center">Start editing src/pages/index.astro to see your changes!</h2>
		<Button
			data-action="/api/v1/checkout"
			data-template="#pouet"
			data-trigger="mouseenter after:100"
			data-target="outerHTML"
		>Checkout</Button>
		<Input
			name="name"
			data-action="/api/v1/projects"
			data-template="#projectItem"
			data-trigger="keydown load after:100"
			data-target="innerHTML ul"
			data-multiple
		/>

		<p>Results</p>
		<ul>

		</ul>
	</main>
	<template id="projectItem">
		<li>
			<a data-attribute="name href:/project/{id}"></a>
		</li>
	</template>
	<!-- Define a template which contains how it is displayed -->
	<template id="pouet">
		<div>
			<!-- Define the attribute in the object that will be assigned -->
			<p data-attribute="caca"></p>
			<!-- You can change the display type by selecting `html` | `innerHTML` | `outerHTML` | `text` | `innerText` | `outerText` -->
			<p data-attribute="caca" data-type="html"></p>
			<!-- You can even add another Requester inside the template! -->
			<p
				data-attribute="caca value:caca"

				data-action="/api/v1/checkout"
				data-template="#pouet"
				data-trigger="mouseover"
				data-target="outerHTML"
			></p>
		</div>
	</template>
	<template id="list">
		<li data-attribute="this"></li>
	</template>
</MainLayout>

<script>
import Hyperion from 'libs/Hyperion'

	Hyperion.setup()
</script>