SelectCity.razor

@namespace BootstrapBlazor.Components
@inherits SelectRegionBase
@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.Region/Components/SelectCity.razor.js", JSObjectReference = true)]

@if (IsShowLabel)
{
    <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
}
<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
    <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString">
        <input type="text" id="@InputId" disabled="@Disabled" readonly placeholder="@PlaceHolder" class="@InputClassString" value="@CurrentValueAsString" />
        <span class="@AppendClassString"><i class="@DropdownIcon"></i></span>
    </div>
    @if (!IsDisabled)
    {
        <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
    }
    <div class="dropdown-menu dropdown-menu-city">
        @if (ShowSearch)
        {
            <div class="dropdown-menu-search">
                <input type="text" class="search-text form-control" autocomplete="off" aria-label="search" />
                <i class="@SearchIconString"></i>
                <i class="@ClearIconString"></i>
            </div>
            <div class="dropdown-menu-search-body">
                @RenderCities()
            </div>
        }
        else
        {
            @RenderCities()
        }
    </div>
</div>

@code {
    RenderFragment RenderItem(string item) =>
    @<div class="bb-region-city-item">
        <div class="bb-region-city-title" @onclick="() => OnSelectProvince(item)">@item</div>
        <ul>
            @foreach (var city in GetCities(item))
            {
                <li class="@GetActiveClass(city)" @onclick="() => OnSelectCity(city)">@city</li>
            }
        </ul>
    </div>;
}