@namespace BootstrapBlazor.Components
@inherits BootstrapModuleComponentBase
@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]

<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
    <CascadingValue Value="this" IsFixed="true">
        @ChildContent
    </CascadingValue>
    <RenderTemplate>
        <ul class="nav">
            @foreach (var item in GetItems())
            {
                <li class="dropdown-center">
                    <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" title="@item.Title">
                        <i class="@item.Icon"></i>
                        @if (!string.IsNullOrEmpty(item.BadgeNumber))
                        {
                            <Badge Color="@item.BadgeColor">@item.BadgeNumber</Badge>
                        }
                    </a>
                    <div class="dropdown-menu shadow">
                        @if (item.ShowArrow)
                        {
                            <div class="dropdown-arrow arrow-@item.HeaderColor.ToDescriptionString()"></div>
                        }
                        @if (item.HeaderTemplate != null)
                        {
                            <div class="dropdown-header bg-@item.HeaderColor.ToDescriptionString()">
                                @item.HeaderTemplate
                            </div>
                        }
                        <div class="dropdown-body">
                            @item.BodyTemplate
                        </div>
                        @if (item.FooterTemplate != null)
                        {
                            <div class="dropdown-footer">
                                @item.FooterTemplate
                            </div>
                        }
                    </div>
                </li>
            }
        </ul>
    </RenderTemplate>
</div>
