Select query {#if isCodeEditorComponentLoading}

{:else}
        <svelte:component
            this={codeEditorComponent}
            id={uniqueId}
            placeholder="eg. SELECT id, name from posts"
            language="sql-select"
            minHeight="150"
            on:change={() => {
                if (schemaErrors.length) {
                    removeError("schema");
                }
            }}
            bind:value={collection.options.query}
        />
    {/if}

<div class="help-block">
        <ul>
            <li>Wildcard columns (<code>*</code>) are not supported.</li>
            <li>
                The query must have a unique <code>id</code> column.
                <br />
                If your query doesn't have a suitable one, you can use the universal
                <code>(ROW_NUMBER() OVER()) as id</code>.
            </li>
            <li>
                Expressions must be aliased with a valid formatted field name (eg.
                <code>MAX(balance) as maxBalance</code>).
            </li>
        </ul>
    </div>

{#if schemaErrors.length}
        <div class="help-block help-block-error">
            <div class="content">
                {#each schemaErrors as err}
                    <p>{err}</p>
                {/each}
            </div>
        </div>
    {/if}
</Field>