<div class="d-flex h-100 d-flex flex-column overflow-x-hidden overflow-y-auto p-2" style="width: 100%; max-width: 550px">
    <MudExpansionPanels Elevation="0" Class="mt-2" Style="border: 1px solid silver">
        <MudExpansionPanel Expanded="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText>LockedNodes</MudText>
                    <MudBadge Content="Agent.LockedNodes.Count" Color="Color.Warning" Overlap="true" Class="d-flex ml-auto">
                        <MudIcon Icon="@Icons.Material.Filled.Info" Color="Color.Info" />
                    </MudBadge>
                </div>
            </TitleContent>
            <ChildContent>
                <div class="d-flex overflow-y-auto flex-wrap" style="max-height: 500px">
                    @foreach (var node in Agent.LockedNodes)
                    {
                        <div class="p-2">
                            <TrafficNodePreview Node="node" />
                        </div>
                    }
                </div>
            </ChildContent>
        </MudExpansionPanel>
    </MudExpansionPanels>

    <MudExpansionPanels Elevation="0" Class="mt-2" Style="border: 1px solid silver">
        <MudExpansionPanel Expanded="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText>Path</MudText>
                    <MudBadge Content="Agent.Nodes.Count" Color="Color.Warning" Overlap="true" Class="d-flex ml-auto">
                        <MudIcon Icon="@Icons.Material.Filled.Info" Color="Color.Info" />
                    </MudBadge>
                </div>
            </TitleContent>
            <ChildContent>
                <div class="d-flex overflow-y-auto flex-wrap" style="max-height: 500px">
                    @foreach (var node in Agent.Nodes)
                    {
                        <div class="p-2">
                            <TrafficNodePreview Node="node" />
                        </div>
                    }
                </div>
            </ChildContent>
        </MudExpansionPanel>
    </MudExpansionPanels>

    <MudExpansionPanels Elevation="0" Class="mt-2" Style="border: 1px solid silver">
        <MudExpansionPanel Expanded="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText>SubNodes</MudText>
                    <MudBadge Content="Agent.SubNodes.Count" Color="Color.Warning" Overlap="true" Class="d-flex ml-auto">
                        <MudIcon Icon="@Icons.Material.Filled.Info" Color="Color.Info" />
                    </MudBadge>
                </div>
            </TitleContent>
            <ChildContent>
                <div class="d-flex overflow-y-auto flex-wrap" style="max-height: 500px">
                    @foreach (var node in Agent.SubNodes)
                    {
                        <div class="p-2">
                            <TrafficNodePreview Node="node" />
                        </div>
                    }
                </div>
            </ChildContent>
        </MudExpansionPanel>
    </MudExpansionPanels>

    <MudExpansionPanels Elevation="0" Class="mt-2" Style="border: 1px solid silver">
        <MudExpansionPanel Expanded="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText>GiveWayNodes</MudText>
                    <MudBadge Content="Agent.GiveWayNodes.Count" Color="Color.Warning" Overlap="true" Class="d-flex ml-auto">
                        <MudIcon Icon="@Icons.Material.Filled.Info" Color="Color.Info" />
                    </MudBadge>
                </div>
            </TitleContent>
            <ChildContent>
                <div class="d-flex overflow-y-auto flex-wrap" style="max-height: 500px">
                    @foreach (var node in Agent.GiveWayNodes)
                    {
                        <div class="p-2">
                            <TrafficNodePreview Node="node" />
                        </div>
                    }
                </div>
            </ChildContent>
        </MudExpansionPanel>
    </MudExpansionPanels>

    <MudExpansionPanels Elevation="0" Class="mt-2" Style="border: 1px solid silver">
        <MudExpansionPanel Expanded="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText>Conflict Agent</MudText>
                </div>
            </TitleContent>
            <ChildContent>
                <MudText Typo="Typo.body1">Conflict Agent: @Agent.ConflictAgentId</MudText>
                <MudText Typo="Typo.body1">Conflict Node: @(Agent.ConflictNode is null ? "" : string.IsNullOrEmpty(Agent.ConflictNode.Name) ? Agent.ConflictNode.Id.ToString("N").Substring(0, 4) : Agent.ConflictNode.Name)</MudText>
            </ChildContent>
        </MudExpansionPanel>
    </MudExpansionPanels>
</div>
@code {
    private TrafficAgentDto Agent { get; set; } = new();

    public void UpdateState(TrafficAgentDto agent)
    {
        Agent.Nodes = [.. agent.Nodes];
        Agent.ReleaseNode = agent.ReleaseNode;
        Agent.LockedNodes = [.. agent.LockedNodes];
        Agent.InNode = agent.InNode;
        Agent.SubNodes = [.. agent.SubNodes];
        Agent.GiveWayNodes = [.. agent.GiveWayNodes];
        Agent.ConflictNode = agent.ConflictNode;
        Agent.ConflictAgentId = agent.ConflictAgentId;
        StateHasChanged();
    }
}
