<script lang="ts">
	import Table from '$lib/client/components/table.svelte';
</script>

<div class="sm:col-span-4 flex gap-2 items-center">
	<label for="website" class="block text-sm font-medium leading-6 text-gray-900">Zone ID:</label>
	<div
		class="flex rounded-primary shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"
	>
		<input
			type="text"
			name="website"
			id="website"
			class="block flex-1 border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
			placeholder="zone-001"
		/>
	</div>
	<button
		class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-primary shadow-sm text-white bg-indigo-600 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
	>
		Save
	</button>
</div>

<Table
	addLink="/devices/1/add"
	deleteLink="/devices/1/delete"
	description="List of devices in group #001"
	title="Devices in group #001"
/>

<div class="mt-10">
	<Table
		addLink="/devices/1/add"
		deleteLink="/devices/1/delete"
		description="When to turn on/off devices"
		title="Schedules"
	/>
</div>
