@inherits InputBase;

<div class="@InputFieldClassList">
    @if (NumOfRows==1)
    {
        <input type="text"
        value="@Value"
        placeholder="@Placeholder"
        disabled="@Disabled"
        readonly="@Readonly"
        @oninput=@ChangeValueAsync
        @attributes="@InputAttributes" />
    } else
    {
        <textarea type="textarea"
           rows="@NumOfRows"
           value="@Value"
           placeholder="@Placeholder"
           disabled="@Disabled"
           readonly="@Readonly"
           @oninput=@ChangeValueAsync
           @attributes="@InputAttributes" />
    }

    <span class="highlight"></span>
    <span class="bar"></span>
    @if (IsLabel)
    {
        <label class="label-animated">@Label</label>
    }
    @if (IsHelperText && !IsError)
    {
        <div class="input-helper-text">@HelperText</div>
    }
    @if (IsError)
    {
        <div class="input-error-text">@ErrorText</div>
    }
    <span class="input-glyph-wraper">
        <span class="input-glyph">
            @if (Clearable)
            {
                <span class="input-glyph button" @onclick="Clear">
                    <i class='bx bx-x-circle'></i>
                </span>
            }
            @if (IsError)
            {
                <span class="input-glyph error">
                    <i class='bx bx-error-circle'></i>
                </span>
            }
        </span>
    </span>
</div>