@using Moonlight.App.Plugin.UI.Servers

<div class="row">
    @foreach (var setting in Context.Settings)
    {
        <div class="col-12 col-md-6 p-3">
            <div class="accordion" id="serverSetting@(setting.GetHashCode())">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="serverSetting-header@(setting.GetHashCode())">
                        <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#serverSetting-body@(setting.GetHashCode())" aria-expanded="false" aria-controls="serverSetting-body@(setting.GetHashCode())">
                            <TL>@(setting.Name)</TL>
                        </button>
                    </h2>
                    <div id="serverSetting-body@(setting.GetHashCode())" class="accordion-collapse collapse" aria-labelledby="serverSetting-header@(setting.GetHashCode())" data-bs-parent="#serverSetting">
                        <div class="accordion-body">
                            @(setting.Component)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@code
{
    [CascadingParameter]
    public ServerPageContext Context { get; set; }
}