@namespace BootstrapBlazor.Components
@typeparam TValue
@inherits PopoverCompleteBase<TValue>

<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
    <div class="input-group">
        @if (PrefixButtonTemplate != null)
        {
            @PrefixButtonTemplate(_context)
        }
        <div class="form-control-group form-control">
            @if (ShowPrefixIcon)
            {
                <div class="search-prefix-icon">
                    @if (PrefixIconTemplate != null)
                    {
                        @PrefixIconTemplate(_context)
                    }
                    else
                    {
                        <i class="@PrefixIcon"></i>
                    }
                </div>
            }
            <input id="@InputId" class="search-input" autocomplete="off" type="text"
                   data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString"
                   data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString"
                   data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
                   data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
                   data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
                   data-bb-input="@UseInputString"
                   placeholder="@PlaceHolder" disabled="@Disabled" />
            @if (IsClearable)
            {
                <div class="search-clear-icon">
                    <i class="@ClearIcon" @onclick="OnClearClick" aria-label="Clear"></i>
                </div>
            }
            @if (IconTemplate != null)
            {
                <div class="search-template-icon">
                    @IconTemplate(_context)
                </div>
            }
        </div>
        @if (ButtonTemplate != null)
        {
            @ButtonTemplate(_context)
        }
        @if (ShowClearButton)
        {
            <Button Color="ClearButtonColor" Text="@ClearButtonText" Icon="@ClearButtonIcon" OnClick="OnClearClick" aria-label="Clear"></Button>
        }
        @if (ShowSearchButton)
        {
            <Button Color="SearchButtonColor" Text="@SearchButtonText" Icon="@ButtonIcon" OnClick="OnSearchClick" aria-label="Search"></Button>
        }
    </div>
    <RenderTemplate @ref="_dropdown">
        @RenderDropdown
    </RenderTemplate>
</div>

@code {
    RenderFragment RenderDropdown =>
    @<ul class="dropdown-menu">
        @foreach (var item in _filterItems)
        {
            <li class="dropdown-item" @onclick="() => OnClickItem(item)">
                @if (ItemTemplate != null)
                {
                    @ItemTemplate(item)
                }
                else
                {
                    <div>@GetDisplayText(item)</div>
                }
            </li>
        }
        @if (_filterItems.Count == 0)
        {
            <li class="dropdown-item">@NoDataTip</li>
        }
    </ul>;
}
