<script lang="ts">
    let { form, data } = $props();
</script>

<form method="POST" action="?/update">
    <label>
        Name
        <input name="name" type="text" defaultValue={data.group ? data.group.name : "New Group"}>
    </label>
    <label>
        Can see
        <select multiple name="canSee">
            {#each data.devices as device}
                <option value={device.id} selected={data.group?.permissions[device.id] ? true : false}>{device.name}</option>
            {/each}
        </select>
    </label>
    <label>
        Can wake
        <select multiple name="canWake">
            {#each data.devices as device}
                <option value={device.id} selected={data.group?.permissions[device.id]?.wake ? true : false}>{device.name}</option>
            {/each}
        </select>
    </label>
    <button>{data.group ? "Update" : "Create"}</button>
    {#if data.group}
        <button formaction="?/delete">Delete</button>
    {/if}
</form>

{#if form?.error}
    <p>Could not {data.group ? "update" : "create"} group: {form.error}</p>
{/if}