@using AntDesign.Internal
@namespace AntDesign
@inherits AntInputComponentBase<string>

<CascadingValue Value=@("ant-cascader-menus") Name="PrefixCls">
        <OverlayTrigger Visible="@(ToggleState && _nodelist != null && _nodelist.Any())"
                        ComplexAutoCloseAndVisible="true"
                        Trigger="new[] { TriggerType.Click }"
                        PopupContainerSelector="@PopupContainerSelector"
                        OverlayEnterCls="ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"
                        OverlayLeaveCls="ant-slide-up-leave ant-slide-up-leave-active ant-slide-up">
            <Unbound>
                <span @ref="context.Current" style="@Style" id="@Id" class="@ClassMapper.Class" tabindex="1" @onclick="InputOnToggle" @onblur="CascaderOnBlur" @onmouseover="InputOnMouseOver" @onmouseout="InputOnMouseOut">
                    <span class="ant-cascader-picker-label"></span>
                    <input autocomplete="off" tabindex="-1" placeholder="@PlaceHolder" class="@_inputClassMapper.Class" readonly="@Readonly" type="text" value="@_displayText">
                    @if (string.IsNullOrWhiteSpace(Value) || !ShowClearIcon)
                    {
                        <Icon Type="down" Class="@($"ant-cascader-picker-arrow {(ToggleState ? "ant-cascader-picker-arrow-expand" : string.Empty)}")" />
                    }
                    else
                    {
                        <Icon Type="close-circle" Class="ant-cascader-picker-clear" OnClick="ClearSelected" StopPropagation />
                    }
                </span>
            </Unbound>
            <Overlay>
                <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" tabindex="-1" @onblur="CascaderOnBlur">
                    <div @onmouseover="NodesOnMouseOver" @onmouseout="NodesOnMouseOut">
                        <ul class="ant-cascader-menu">
                            @foreach (CascaderNode nd in _nodelist)
                            {
                                bool isActive = _renderNodes.Where(n => n == nd).Any();
                                string activeClass = isActive ? "ant-cascader-menu-item-active" : string.Empty;

                                <li class="ant-cascader-menu-item ant-cascader-menu-item-expand @activeClass @(nd.Disabled ? "ant-cascader-menu-item-disabled" : string.Empty)" title="@nd.Label" role="menuitem"
                                    @onclick="@(e => NodeOnClick(nd))" @onmouseover="@(e => NodeOnMouseOver(nd))">
                                    @nd.Label
                                    @if (nd.HasChildren)
                                    {
                                        <span class="ant-cascader-menu-item-expand-icon">
                                            <Icon Type="right" />
                                        </span>
                                    }
                                </li>
                            }
                        </ul>
                        @foreach (CascaderNode node in _renderNodes)
                        {
                            if (node.HasChildren)
                            {
                                <ul class="ant-cascader-menu">
                                    @foreach (CascaderNode m in node.Children)
                                    {
                                        bool isActive = _renderNodes.Where(n => n == m).Any();
                                        string activeClass = isActive ? "ant-cascader-menu-item-active" : string.Empty;

                                        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand @activeClass @(m.Disabled ? "ant-cascader-menu-item-disabled" : string.Empty)" title="@m.Label" role="menuitem"
                                            @onclick="@(e => NodeOnClick(m))" @onmouseover="@(e => NodeOnMouseOver(m))">
                                            @m.Label
                                            @if (m.HasChildren)
                                            {
                                                <span class="ant-cascader-menu-item-expand-icon">
                                                    <Icon Type="right" />
                                                </span>
                                            }
                                        </li>
                                    }
                                </ul>
                            }
                        }
                    </div>
                </div>
            </Overlay>
        </OverlayTrigger>
</CascadingValue>