<x-form>
	<form class="flex flex-col gap-6" @submit.prevent="view('license')">
		<div class="flex items-center gap-2">
			<button type="button" @click="view('welcome')" :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>Requirements</h1>
		</div>

		<div class="flex flex-col gap-4">
			<div>
				<h2>PHP configuration</h2>
				<p class="mt-1 text-sm text-intermediate-content">
					Please configure PHP to match following requirements /
																														                    settings:
				</p>
			</div>

			<table class="w-full [&_i]:text-2xl [&_td:last-child]:text-end [&_thead_td]:border-b [&_thead_td]:border-line-dimmed text-sm text-intermediate-content">
				<thead class="text-xs text-content-dimmed">
					<tr>
						<td class="pb-2">PHP Settings</td>
						<td class="pb-2">Required</td>
						<td class="pb-2">Current</td>
						<td class="pb-2">&nbsp;</td>
					</tr>
				</thead>

				<tbody>
					<template x-for="(set, index) in requirements.config">
						<tr>
							<td class="font-semibold" x-text="set.name" :class="{'pt-2': index==0}"></td>
							<td :class="{'pt-2': index==0}" x-text="
																																																                                set.requirement"></td>
							<td :class="{'pt-2': index==0}" x-text="set.current">
								7.4.33</td>

							<td :class="{'pt-2': index==0}">
								<template x-if="set.is_satisfied">
									<i class="text-2xl ti ti-square-rounded-check-filled" :class="{'text-success': set.is_required}"></i>
								</template>

								<template x-if="!set.is_satisfied">
									<i class="text-2xl ti ti-square-rounded-x-filled" :class="{'text-failure': set.is_required}"></i>
								</template>
							</td>
						</tr>
					</template>
				</tbody>
			</table>
		</div>

		<hr class="border-line">

		<div class="flex flex-col gap-4">
			<div>
				<h2>Required PHP extensions</h2>
				<p class="mt-1 text-sm text-intermediate-content">
					Following PHP extenstions must be installed and enabled:
				</p>
			</div>

			<table class="w-full [&_i]:text-2xl [&_td:last-child]:text-end [&_thead_td]:border-b [&_thead_td]:border-line-dimmed text-sm text-intermediate-content">
				<thead class="text-xs text-content-dimmed">
					<tr>
						<td class="pb-2">Name</td>
						<td class="pb-2">Status</td>
						<td class="pb-2">&nbsp;</td>
					</tr>
				</thead>

				<tbody>
					<template x-for="(set, index) in requirements.ext">
						<template x-if="set.is_required">
							<tr>
								<td class="font-semibold" :class="{'pt-2': index==0}" x-text="set.name"></td>
								<td :class="{'pt-2': index==0}" x-text="set.is_satisfied ? 'Installed' : 'Not Installed'"></td>
								<td :class="{'pt-2': index==0}">
									<template x-if="set.is_satisfied">
										<i class="text-2xl ti ti-square-rounded-check-filled text-success"></i>
									</template>

									<template x-if="!set.is_satisfied">
										<i class="text-2xl ti ti-square-rounded-x-filled text-failure"></i>
									</template>
								</td>
							</tr>
						</template>
					</template>
				</tbody>
			</table>
		</div>

		<hr class="border-line">

		<div class="flex flex-col gap-4">
			<div>
				<h2>Suggested PHP extensions</h2>
				<p class="mt-1 text-sm text-intermediate-content">
					Following PHP extensions are suggested, but not required:
				</p>
			</div>

			<table class="w-full [&_i]:text-2xl [&_td:last-child]:text-end [&_thead_td]:border-b [&_thead_td]:border-line-dimmed text-sm text-intermediate-content">
				<thead class="text-xs text-content-dimmed">
					<tr>
						<td class="pb-2">Name</td>
						<td class="pb-2">Status</td>
						<td class="pb-2">&nbsp;</td>
					</tr>
				</thead>

				<tbody>
					<template x-for="(set, index) in requirements.ext">
						<template x-if="!set.is_required">
							<tr>
								<td class="font-semibold" x-text="set.name" :class="{'pt-2': index==0}"></td>
								<td :class="{'pt-2': index==0}" x-text="set.is_satisfied ? 'Installed' : 'Not Installed'"></td>
								<td :class="{'pt-2': index==0}">
									<template x-if="set.is_satisfied">
										<i class="text-2xl ti ti-square-rounded-check-filled"></i>
									</template>

									<template x-if="!set.is_satisfied">
										<i class="text-2xl ti ti-square-rounded-x-filled"></i>
									</template>
								</td>
							</tr>
						</template>
					</template>
				</tbody>
			</table>
		</div>

		<hr class="border-line">

		<div class="flex flex-col gap-4">
			<div>
				<h2>Write permissions</h2>
				<p class="mt-1 text-sm text-intermediate-content">
					Following files and folders must be writeable by PHP
				</p>
			</div>

			<table class="w-full [&_i]:text-2xl [&_td:last-child]:text-end [&_thead_td]:border-b [&_thead_td]:border-line-dimmed text-sm text-intermediate-content">
				<thead class="text-xs text-content-dimmed">
					<tr>
						<td class="pb-2">Name</td>
						<td class="pb-2">Type</td>
						<td class="pb-2">&nbsp;</td>
					</tr>
				</thead>

				<tbody>
					<template x-for="(set, index) in requirements.write_access">
						<tr>
							<td class="font-semibold" x-text="set.name" :class="{'pt-2': index==0}"></td>

							<td :class="{'pt-2': index==0}" x-text="set.is_dir ? 'Directory' : 'File'"></td>

							<td :class="{'pt-2': index==0}">
								<template x-if="set.is_satisfied">
									<i class="text-2xl ti ti-square-rounded-check-filled text-success"></i>
								</template>

								<template x-if="!set.is_satisfied">
									<i class="text-2xl ti ti-square-rounded-x-filled text-failure"></i>
								</template>
							</td>
						</tr>
					</template>
				</tbody>
			</table>
		</div>

		<template x-if="requirements.is_satisfied">
			<button type="submit" class="w-full button group" :processing="isProcessing">

				Continue
				<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>

		<template x-if="!requirements.is_satisfied">
			<button type="button" class="w-full button button-dimmed group" :processing="isProcessing" @click="viewRequirement()">

				<i class="ti ti-reload group-[[processing]]:hidden"></i>

				{% include "snippets/spinner.twig" %}

				Check again
			</button>
		</template>
	</form>
</x-form>
