@using Connected.Models;

@typeparam ValueType

@inherits InputBase;

@if (component_loaded)
{
    @if (Items is not null)
    {
        <div class="@InputFieldClassList">
            <select type="textarea"
            style="height:0px;"
            @attributes=@InputAttributes></select>
            @if (IsLabel)
            {
                <label class="label-animated">@Label</label>
            }

            <span class="highlight"></span>

            <span class="bar"></span>

            <span class="input-glyph-wraper">
                @if (Clearable)
                {
                    <span class="input-glyph button">
                        <i class='bx bx-x-circle'></i>
                    </span>
                }
                <span class="input-glyph">
                    <i class='bx bx-caret-down'></i>
                </span>
                @if (IsError)
                {
                    <span class="input-glyph error">
                        <i class='bx bx-error-circle'></i>
                    </span>
                }
            </span>
            <div class="drop-down">
                <div class="dropdown-menu p-2"
             aria-labelledby="dropdownMenuButton">
                    @if (EnableSearch)
                    {
                        <input type="text"
                   placeholder="Enter search string..."
                   class="dropdown-item"
                   @bind-value="@SearchText" />
                    }
                    @foreach (ValueType item in FilteredItems)
                    {
                        @if (item is not null)
                        {
                            <div class="dropdown-item"
                                @onclick=@(()=>SetSelectedItem(@item))>
                                @item.ToString()
                            </div>
                        }
                    }
                </div>
            </div>
        </div>
    }
}