<script>
    import {getErrorMessage} from "./errorMessage";
    import Autocomplete from "../../autocomplete/Autocomplete.svelte";

    export let field;
    export let value;
    export let isCreateMode;
    export let validationErrors;

    $: errorMessage = getErrorMessage(validationErrors, field.name);
    export let id;

</script>

<div style="position: relative;">
    {#if  field.selectOptions}
        <Autocomplete {field} bind:value={value}></Autocomplete>
    {:else}
        <input
            type="text"
            {id}
            class="form-control"
            class:is-invalid={errorMessage}
            bind:value
            autocomplete="off"
            readonly={field.readonly && !isCreateMode}
        />
    {/if}

    {#if errorMessage}
        <div class="invalid-feedback d-block">
            {errorMessage}
        </div>
    {/if}
</div>
