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

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

    let list;

    function fixDecimals(e) {
        const number = e.currentTarget.value;
        const formattedNumber = formatNumber(number);
        value = isNaN(formattedNumber) ? null : formattedNumber;
    }

    function formatNumber(number) {
        return parseFloat(number).toFixed(field.decimals);
    }

</script>

<div class="mb-0">

    <input
            type="number"
            {id}
            class="form-control"
            class:is-invalid={errorMessage}
            on:change={fixDecimals}
            bind:value
            autocomplete="off"
            readonly={field.readonly && !isCreateMode}
    />

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