<script>
    import { getErrorMessage } from "./errorMessage";
    export let field;
    export let value;
    export let isCreateMode;
    export let validationErrors;
    export let id;
    $: errorMessage = getErrorMessage(validationErrors, field.name);
</script>

<div class="mb-0">
    <div class="input-group ">
        <div style="width:64px;">
            <input
                type="color"
                {id}
                class="form-control form-control-color"
                disabled={field.readonly && !isCreateMode}
                bind:value
            />
        </div>
        <input
            type="text"
            class:is-invalid={errorMessage}
            {id}
            class="form-control"
            bind:value
            readonly={field.readonly && !isCreateMode}
        />
    </div>

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