<script>
    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
    import { post } from "../../modules/remote";
    let { channel, user, data } = $props();
    let newSchemaName = $state("");
    let newSchemaAlias = $state("");

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

<ChannelLayout {body} {channel} {user}></ChannelLayout>
{#snippet body()}
    <h3 class="header-small mb-4 mt-5">Schemas</h3>

    <details style="max-width: 400px;">
        <summary>Create Schema</summary>
        <form onsubmit={handleSchemaCreate}>
            <fieldset>
                <label>
                    Name
                    <input
                        bind:value={newSchemaName}
                        placeholder="Schema name"
                        minlength="2"
                        maxlength="30"
                        required
                    />
                </label>
                <label>
                    Alias
                    <input
                        bind:value={newSchemaAlias}
                        placeholder="Schema alias"
                        minlength="2"
                        maxlength="30"
                        required
                    />
                </label>
            </fieldset>

            <button type="submit">Create</button>
        </form>
    </details>
    <div style="display: flex;gap:20px">
        {#each data.schemas as schema}
            <article style="min-width: 300px;">
                <header>{schema.name}</header>
                <details>
                    <summary>Fields</summary>
                    <table>
                        <tbody>
                            <tr>
                                <td>Title</td>
                            </tr>
                        </tbody>
                    </table>
                </details>
                <details>
                    <summary>Add field</summary>
                    <ul>
                        <li>
                            <a
                                href={`/fields/create?schema=${schema.id}&type=text`}
                                >Text</a
                            >
                        </li>

                        <li>
                            <a
                                href={`/fields/create?schema=${schema.id}&type=text`}
                                >File</a
                            >
                        </li>
                        <li>
                            <a
                                href={`/fields/create?schema=${schema.id}&type=text`}
                                >Rich</a
                            >
                        </li>
                    </ul>
                </details>
                <footer>
                    <small> Id: {schema.id}</small><br />
                    <small> Alias: {schema.alias}</small><br />
                    <small> Revisions: {schema.revisions}</small><br />
                </footer>
            </article>
        {/each}
    </div>
{/snippet}
