<script lang="ts">
	import { enhance } from '$app/forms';
	import type { PageProps } from './$types';

	let { data, form }: PageProps = $props();
</script>

<div class="base-container">
	<div class="content">
		<div class="elevated separator-borders m-4 rounded">
			<div class="bottom-border flex place-content-between">
				<div class="p-3 font-semibold">Create new company</div>
			</div>
			<form method="POST" class="px-4" autocomplete="off" use:enhance>
				<div class="mt-4 text-sm font-semibold">
					Name <span class="text-red-500">*</span>
					<input
						type="text"
						name="name"
						id="name"
						placeholder="Name"
						class="w-full rounded font-normal"
						required
					/>
				</div>
				<div class="mt-4 text-sm font-semibold">
					Description <span class="text-red-500">*</span>
					<textarea
						name="description"
						id="description"
						rows="4"
						placeholder="Description"
						class="w-full rounded font-normal"
						required
					></textarea>
				</div>
				<div class="mt-4 text-sm font-semibold">
					Website <span class="text-red-500">*</span>
					<input
						type="text"
						name="website"
						id="website"
						placeholder="Website"
						class="w-full rounded font-normal"
						required
					/>
				</div>

				{#if form?.errorMessage}
					<div class="mb-2 text-red-500">{form.errorMessage}</div>
				{/if}
				<button
					class="dull-primary-bg-color mb-4 mt-6 rounded px-2 py-1"
					type="submit"
					formaction="?/submit">Create company</button
				>
			</form>
		</div>
	</div>
</div>
