<script>
    import {getContext} from "svelte";

    const channel = getContext("channel");
    export let field;
    export let schema;
    export let id;
</script>

<div class="mb-1">
    <div class="d-flex justify-content-between">
        <div>
            <label for={id} class="form-label"
            >{field.label}</label
            >
            {#if field.help}
                <small class=" text-primary  opacity-50">{field.help}</small>
            {/if}
        </div>
        <a
            tabindex="-1"
            class="text-decoration-none"
            href="{channel.lucentUrl}/schemas/{schema.name}/fields/edit/{field.name}"
        ><code class="text-primary opacity-50">{field.name}</code>
        </a>
    </div>
</div>
