<script lang="ts">
import ToggleSwitch from "$lib/client/components/toggle.svelte";
import WeekCheckbox from "$lib/client/components/weekCheckbox.svelte";

let statusEnabled: boolean = false;

const handleToggle = (newStatus: boolean) => {
    statusEnabled = newStatus;
};
</script>

<section class="space-y-4 lg:space-y-8">
    <h1 class="h1">
        Edit
    </h1>

    <div class="space-y-10 divide-y divide-gray-900/10">
        <form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
            <div class="px-4 py-6 sm:p-8">
                <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-5">
                        <label for="first-name" class="label">Name</label>
                        <div class="mt-2">
                            <input type="text" name="name" id="name" autocomplete="given-name"
                                   class="input" value="South entrance weekends">
                        </div>
                    </div>

                    <div class="sm:col-span-2 sm:col-start-1">
                        <label for="startTime" class="label">Start time</label>
                        <div class="mt-2">
                            <input type="text" name="startTime" id="startTime" class="input">
                        </div>
                    </div>

                    <div class="sm:col-span-2">
                        <label for="endTime" class="label">End time</label>
                        <div class="mt-2">
                            <input type="text" name="endTime" id="endTime" class="input">
                        </div>
                    </div>

                    <div class="col-span-full flex items-center gap-4">
                        <label for="status" class="label">Status:</label>

                        <ToggleSwitch on:toggle={event => handleToggle(event.detail)} />

                        <span class="label {statusEnabled ? '' : 'text-gray-400'}">{statusEnabled ? 'on' : 'off'}</span>
                    </div>

                    <div class="col-span-full">
                        <label for="street-address" class="label">Days of week</label>
                        <div class="mt-2">
                            <WeekCheckbox />
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-end gap-x-4 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                <a href="/schedule" class="btn text-purple-600">Cancel</a>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>


</section>
