<script>
	$: targetUrl = '';
	$: customShortcode = '';
	$: shortcode = '';
</script>

<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
{#if shortcode == ''}
	<div>
		<div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
			<input
				type="url"
				required
				class="flex-1 min-w-0 block border rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
				placeholder="https://target.url"
			/>
		</div>
		<div class="mt-1 flex rounded-md shadow-sm mx-auto lg:w-1/3 w-full">
			<span
				class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 text-gray-500 sm:text-sm dark:border-gray-600"
			>
				https://kauf.es/
			</span>
			<input
				type="text"
				class="flex-1 min-w-0 block w-full px-3 py-2 border-t border-b border-r rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
				placeholder="custom_code"
			/>
		</div>
	</div>
{:else}
	TODO:
{/if}
<div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
	{#if shortcode == ''}
		<button
			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
		>
			Create shorturl
		</button>
	{:else}
		<button
			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
		>
			Add another url
		</button>
	{/if}
</div>
