<x-form>
	<form class="flex flex-col gap-6" @submit.prevent="install()">
		<div class="flex items-center gap-2">
			<button type="button" @click="view('db')" :disabled="isProcessing" class="inline-flex items-center gap-1 text-sm rounded-lg text-content-dimmed hover:text-content">
				<i class="text-2xl ti ti-square-rounded-arrow-left-filled"></i>
			</button>

			<h1>Account details</h1>
		</div>

		<div class="grid grid-cols-2 gap-6">
			<div>
				<label for="first-namet" class="text-sm font-semibold">First name</label>
				<input type="text" class="mt-2 input" id="first-namet" placeholder="Type your first name" required x-model="model.account.first_name">
			</div>

			<div>
				<label for="last-namet" class="text-sm font-semibold">Last name</label>
				<input type="text" class="mt-2 input" id="last-namet" placeholder="Type your last name" required x-model="model.account.last_name">
			</div>

			<div>
				<label for="email" class="text-sm font-semibold">Email</label>
				<input type="email" class="mt-2 input" id="email" placeholder="Type your email" required x-model="model.account.email">
			</div>

			<div>
				<label for="password" class="text-sm font-semibold">Password</label>
				<input type="password" class="mt-2 input" id="password" placeholder="Type your password" autocomplete="new-password" required x-model="model.account.password">
			</div>
		</div>

		<template x-if="error">
			<div class="text-xs text-failure" x-text="error"></div>
		</template>

		<div>
			<button type="submit" class="w-full button group" :processing="isProcessing">
				Finish installation
				<i class="ti ti-square-rounded-arrow-right-filled group-[[processing]]:hidden"></i>

				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" class="spinner" xml:space="preserve">
					<path fill="currentColor" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
						<animateTransform attributetype="xml" attributename="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatcount="indefinite"></animateTransform>
					</path>
				</svg>
			</button>

			<template x-if="model.migrate === false && model.hasData">
				<p class="mt-4 text-xs text-center text-content-dimmed">
					This will delete all existing data in the
					<strong x-text="model.db.name" class="text-content"></strong>
					database.
				</p>
			</template>
		</div>
	</form>
</x-form>
