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

<div>
    <div class="form-check form-check-inline">
        <input
            class="form-check-input"
            type="radio"
            class:is-invalid={errorMessage}
            bind:group={value}
            id="{id}-1"
            value={true}
            disabled={field.readonly && !isCreateMode}
        />
        <label class="form-check-label" for="{id}-1">Yes</label>
    </div>
    <div class="form-check form-check-inline">
        <input
            class="form-check-input"
            type="radio"
            id="{id}-2"
            class:is-invalid={errorMessage}
            bind:group={value}
            value={false}
            disabled={field.readonly && !isCreateMode}
        />
        <label class="form-check-label" for="{id}-2">No</label>
    </div>
    {#if field.nullable}
        <div class="form-check form-check-inline">
            <input
                class="form-check-input"
                class:is-invalid={errorMessage}
                id="{id}-3"
                type="radio"
                bind:group={value}
                value={null}
                disabled={field.readonly && !isCreateMode}
            />
            <label class="form-check-label" for="{id}-3">Don't Know</label>
        </div>
    {/if}
</div>

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