<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 style="display: flex; align-items: center;gap: 10px">
        <input
                type="color"
                {id}
                style="border: none;background: transparent;padding: 0;width:64px;"
                disabled={field.readonly && !isCreateMode}
                bind:value
        />
        <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>
