<script>
    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
    import Sortable from "../../common/Sortable.svelte";
    import { post } from "../../modules/remote";
    import { getApp } from "../../app";
    let { channel, user, data } = $props();
    const app = getApp();

    function handleSchemaCreate(e) {
        e.preventDefault();
        // post(
        //     channel.lucentUrl + "/schemas",
        //     {
        //         name: newSchemaName,
        //         alias: newSchemaAlias,
        //     },
        //     (data, err) => {
        //         if (err.isEmpty()) {
        //             Turbo.visit(window.location.href);
        //         }
        //     },
        // );
    }
</script>

<ChannelLayout {body} {channel} {user}></ChannelLayout>
{#snippet body()}
    <h3>Edit Schema</h3>

    <form onsubmit={handleSchemaCreate}>
        <fieldset>
            <label>
                Name
                <input
                    bind:value={data.schema.name}
                    placeholder="ex. Blog Posts"
                    minlength="2"
                    maxlength="30"
                    required
                />
                <small id="alias-helper">Plural is recommended</small>
            </label>
            <label>
                Alias
                <input
                    bind:value={data.schema.alias}
                    placeholder="ex. blog_posts"
                    minlength="2"
                    maxlength="30"
                    required
                    aria-describedby="alias-helper"
                />
                <small id="alias-helper">
                    Developers will use this to reference the field
                </small>
            </label>
        </fieldset>

        <button type="submit">Update</button>
    </form>
{/snippet}
