@using WebApp.Components.Pages

@if (Title != null)
{
    <MudText Typo="Typo.h4">@Title</MudText>
}

<MudToggleGroup T="Team"
                SelectionMode="SelectionMode.MultiSelection"
                Values="@SelectedTeams"
                ValuesChanged="@OnSelectedTeamsChanged"
                Vertical="true"
                CheckMark>
    @foreach (var team in Teams.OrderBy(e => e.Event.Name))
    {
        <MudToggleItem Value="@team" Style="font-size: .75rem;">
            <MudTooltip Text="@team.StudentsFirstNames">
                <div class="d-flex align-center justify-space-between flex-wrap">
                    <MudText Class="ellipsis">@team.ToString()</MudText>
                    @if (ShowEventAttributes)
                    {
                        <EventAttributes EventDefinition="@team.Event"></EventAttributes>
                    }
                </div>
            </MudTooltip>
        </MudToggleItem>
    }
</MudToggleGroup>

@code {
    [Parameter]
    public IEnumerable<Team> Teams { get; set; } = [];

    [Parameter]
    public IEnumerable<Team> SelectedTeams { get; set; } = [];

    [Parameter]
    public EventCallback<IEnumerable<Team>> SelectedTeamsChanged { get; set; }

    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public bool ShowEventAttributes { get; set; } = true;

    private async Task OnSelectedTeamsChanged(IEnumerable<Team> value)
    {
        SelectedTeams = value;
        await SelectedTeamsChanged.InvokeAsync(value);
    }
}