@namespace BootstrapBlazor.Components
@inherits BootstrapModuleComponentBase
@attribute [BootstrapModuleAutoLoader("Button/DialButton.razor.js")]

<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString" data-bb-placement="@Placement.ToDescriptionString()" data-bb-auto-close="@IsAutoCloseString" data-bb-offset="@Offset" data-bb-radius="@RadiusString" data-bb-duration="@DurationString">
    <CascadingValue Value="_buttonItems" IsFixed="true">
        @ChildContent
    </CascadingValue>
    <RenderTemplate>
        <div class="btn-dial">
            @if (ButtonTemplate == null)
            {
                <button type="button" class="@ButtonClassString" disabled="@Disabled" role="button">
                    @if (!string.IsNullOrEmpty(Icon))
                    {
                        <i class="@Icon"></i>
                    }
                </button>
            }
            else
            {
                @ButtonTemplate
            }
        </div>
        <div class="dial-list">
            <div class="dial-list-content" role="menu">
                @foreach (var item in _list)
                {
                    <div @key="@item" class="dial-item" role="menuitem" @onclick="@(e => OnClickItem(item))">
                        @if (ItemTemplate == null)
                        {
                            if(item.ChildContent != null)
                            {
                                @item.ChildContent
                            }
                            else
                            {
                                <i class="@item.Icon"></i>
                            }
                        }
                        else
                        {
                            @ItemTemplate(item)
                        }
                    </div>
                }
            </div>
        </div>
    </RenderTemplate>
</div>
