@using WebSharpRSS.Models;


<div>
    <div @onclick="@(() => ItemClickedVoid())" class="cat-item mud-ripple" style="--hover-bg-color: @Colors.Blue.Accent1; --background-color: @(Model.IsSelected ? Colors.Blue.Accent2 : "transparent")">
        <div class="cat-item-icon">
            @if (Model.FaviconUrl != null)
            {
                <MudImage ObjectFit="ObjectFit.ScaleDown" Src="@Model.FaviconUrl" />
            }
            else
            {
                <MudIcon Class="pointer-events-none" Icon="@Model.Icon" Size="Size.Medium" />
            }

        </div>
        <div class="cat-item-text">
            <MudText Class="pointer-events-none" Typo="Typo.subtitle1">@Model.Title</MudText>
        </div>
    </div>
    @if (IsExpanded && Model.Feeds != null && !(Model.Feeds.Count <= 0))
    {
        foreach (GuideItemModel item in Model.Feeds)
        {
            <div style="margin-left: 20px">
                <GuideItem Model="@item" />
            </div>
        }
    }
</div>

@code {
    [Parameter]
    public GuideItemModel Model { get; set; }
    [Parameter]
    public EventCallback<GuideItemModel> ItemClicked { get; set; }

    public bool IsExpanded { get; set; }

    private void ItemClickedVoid()
    {
        IsExpanded = !IsExpanded;
        ItemClicked.InvokeAsync(Model);
    }
}