@using MP.MONO.Core


<div class="d-grid gap-3">
    <button class="btn @btnType btn-block" @onclick="() => toggleDisplay()"><b>@ParamName <i class="@caretIcon"></i></b></button>
</div>
@if (showSection)
{
    <div class="small">
        @if (currInfo == null || currInfo.Count == 0)
        {
            <LoadingDataSmall></LoadingDataSmall>
        }
        else
        {
            <ul class="list-group">
                @foreach (var item in currInfo)
                {
                    <li class="list-group-item d-flex justify-content-between align-items-center">@item.Key: <b>@item.Value</b></li>
                }
            </ul>
        }
    </div>
}


@code {
    [Parameter]
    public string ParamName { get; set; } = "ND";
    
    [Parameter]
    public string btnType { get; set; } = "btn-primary";

    [Parameter]
    public Dictionary<string, string> currInfo { get; set; } = new Dictionary<string, string>();

    [Parameter]
    public bool showSection { get; set; } = false;


    protected void toggleDisplay()
    {
        showSection = !showSection;
    }

    protected string caretIcon
    {
        get => showSection ? "bi bi-caret-up-square-fill" : "bi bi-caret-down-square-fill";
    }
}