@using Connected.Models;

@inherits InputBase;

<div class="@InputFieldClassList">
    <textarea value="@Value"
              placeholder="@Placeholder"
              disabled="@Disabled"
              readonly="@Readonly"
              required="@Required"
              style="overflow-x: hidden; overflow-y: hidden;"
              @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 && !string.IsNullOrEmpty(Value))
            {
                <span class="input-glyph button" @onclick="Clear">
                    <Glyph SVG="@Icons.Material.Rounded.Dangerous" />
                </span>
            }
            @if (IsError)
            {
                <span class="input-glyph error">
                    <Glyph SVG="@Icons.Material.Outlined.Error" />
                </span>
            }
        </span>
    </span>
</div>