<script lang="ts">
	import lev from '$lib/assets/logo/lev.png';
	import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
	import TextField from '$lib/components/textfield/TextField.svelte';

	import background from '$lib/assets/background2.jpg';

	let adminIdValue = '';
	let adminPasswordValue = '';
</script>

<SplitLayout backgroundImage={background} backgroundPosition="30%">
	<div class="form">
		<div
			class="py-3 px-6 md:py-4 md:px-8 rounded-[999px] shadow-2xl flex items-center justify-center"
		>
			<img class="object-cover" src={lev} alt="" />
		</div>
		<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
		<p class="mt-8 font-light text-sspsGray text-center">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
		</p>
		<div class="w-3/5">
			<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />

			<TextField bind:value={adminPasswordValue} placeholder="Heslo" type="password" icon>
				<div slot="icon" class="flex items-center justify-center">
					<svg class="stroke-sspsBlue" fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"
						><g  class="fill-sspsBlue"
							><path
								d="M19.414 20.414l.707.707zm-14.828 0l-.707.707zm14.828-9.828l.707-.707zM8 11h8V9H8zm-3 6v-3H3v3zm11 3H8v2h8zm3-6v3h2v-3zm-3 8c.915 0 1.701.002 2.328-.082.655-.088 1.284-.287 1.793-.797l-1.414-1.414c-.076.076-.212.17-.646.229-.462.062-1.09.064-2.061.064zm3-5c0 .971-.002 1.599-.064 2.061-.059.434-.153.57-.229.646l1.414 1.414c.51-.51.709-1.138.797-1.793C21.002 18.7 21 17.915 21 17zM3 17c0 .915-.002 1.701.082 2.328.088.655.287 1.284.797 1.793l1.414-1.414c-.076-.076-.17-.212-.229-.646C5.002 18.6 5 17.971 5 17zm5 3c-.971 0-1.599-.002-2.061-.064-.434-.059-.57-.153-.646-.229l-1.414 1.414c.51.51 1.138.709 1.793.797C6.3 22.002 7.085 22 8 22zm8-9c.971 0 1.599.002 2.061.064.434.059.57.153.646.229l1.414-1.414c-.51-.51-1.138-.709-1.793-.797C17.7 8.998 16.915 9 16 9zm5 3c0-.915.002-1.701-.082-2.328-.088-.655-.287-1.284-.797-1.793l-1.414 1.414c.076.076.17.212.229.646.062.462.064 1.09.064 2.061zM8 9c-.915 0-1.701-.002-2.328.082-.655.088-1.284.287-1.793.797l1.414 1.414c.076-.076.212-.17.646-.229C6.4 11.002 7.029 11 8 11zm-3 5c0-.971.002-1.599.064-2.061.059-.434.153-.57.229-.646L3.879 9.879c-.51.51-.709 1.138-.797 1.793C2.998 12.3 3 13.085 3 14z"
							/><path
								d="M16 6h-1zm-8 4h1V6.5H7V10zm1-3.5c0-1.174.447-1.718.942-2.026C10.514 4.12 11.293 4 12 4V2c-.856 0-2.077.131-3.114.776C7.772 3.468 7 4.674 7 6.5zM12 4c.706 0 1.514.118 2.108.441.524.285.892.72.892 1.559h2c0-1.66-.85-2.726-1.937-3.316C14.05 2.132 12.856 2 12 2zm3 2v4h2V6z"
							/></g
						></svg
					>
				</div>
			</TextField>
		</div>
		<input
			class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
			type="submit"
			value="Odeslat"
		/>
	</div>
</SplitLayout>

<style>
	.form {
		@apply flex flex-col;
		@apply mx-auto w-[90%] h-full;
		@apply items-center justify-center;
	}
</style>
