<script lang="ts">
    import Map from '$lib/client/components/map.svelte';
    import ToggleSwitch from '$lib/client/components/toggle.svelte';
    import {
        IconArrowUturnLeft,
        IconArrowUturnRight,
        IconCheck,
        IconCursorArrowRays,
        IconXMark
    } from '$lib/client/components/icons';

    let initialValueForSwitch: boolean = true;
</script>

<section class="space-y-4 lg:space-y-8">
    <h1 class="text-xl lg:text-2xl font-medium lg:text-right">Create new zones with edit buttons:</h1>
    <div class="flex relative overflow-hidden rounded-primary border border-gray-200 bg-white">


        <Map/>

        <div class="top-2 absolute bg-white block right-2 rounded-primary shadow z-10">
            <div class="flex flex-col gap-4 p-2">
                <div class="flex flex-col gap-0.5">
                    <button class="btn btn-primary" type="button">
                        <IconArrowUturnLeft/>
                    </button>

                    <button class="btn btn-primary" type="button">
                        <IconArrowUturnRight/>
                    </button>
                </div>

                <button class="btn btn-primary" type="button">
                    <IconCursorArrowRays/>
                </button>

                <div class="flex-col gap-0.5 hidden">
                    <button class="btn btn-primary" type="button">
                        <IconCheck/>
                    </button>
                    <button class="btn btn-primary" type="button">
                        <IconXMark/>
                    </button>
                </div>

                <div class="flex flex-col gap-0.5">
                    <button class="btn btn-primary" type="button">
                        <span class="size-6 border-2 border-white rounded block"></span>
                    </button>
                    <button class="btn btn-primary" type="button">
                        <span class="size-6 border-2 border-white rounded-full block"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="mx-auto max-w-6xl">
        <div class="flex flex-col">
            <div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                    <tr
                            class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
                    >
                        <th class="text-left" scope="col">Zone name</th>
                        <th class="text-right" scope="col">Gateways</th>
                        <th class="text-right" scope="col">Lamps</th>
                        <th class="text-right" scope="col">Sensors</th>
                        <th class="text-center" scope="col">Schedule</th>
                        <th class="text-right" scope="col">On/Off</th>
                        <th class="text-right" scope="col">Actions</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                    {#each {length: 8} as item, index}
                        <tr class="bg-white text-sm *:px-6 *:py-4">
                            <td class="text-gray-900">
                                Zone #{index + 1}
                            </td>
                            <td class="text-right">12</td>
                            <td class="text-right"> 20</td>
                            <td class="text-right">40</td>
                            <td class="text-center"><a href="/" class="text-purple-800">View</a></td>
                            <td class="text-right">
                                <ToggleSwitch {initialValueForSwitch}/>
                            </td>
                            <td class="text-right">
                                <div class="flex gap-4 items-center justify-end">
                                    <a href="/" class="text-purple-800">Edit</a>
                                    <a href="/" class="text-red-600">Delete</a>
                                </div>
                            </td>
                        </tr>
                    {/each}
                    <!-- More transactions... -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
