<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>Migration</h1>
		</div>

		<p>
			We found existing data in the database. You can either
			<strong>migrate</strong>
			the data or
			<strong>start fresh</strong>.
		</p>

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

		<button type="submit" class="w-full button group" :processing="isProcessing">
			Migrate and 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>

		<div class="relative flex justify-center my-4 text-xs text-content-dimmed before:absolute before:left-0 before:top-1/2 before:w-full before:h-px before:bg-line-dimmed">
			<span class="relative z-10 px-4 bg-main">OR</span>
		</div>

		<button type="button" class="w-full button button-outline" :disabled="isProcessing" @click="model.migrate=false; view('account')">
			Continue without migration
		</button>
	</form>
</x-form>
