@model SharedLibraryCore.Dtos.ServerInfo

@{
    Layout = null;
    var half = Model.ClientCount == 0 || Model.Players.Count == 0 ? 0 : (int)Math.Ceiling(Model.ClientCount / 2.0);
    var groupedClients = Model.Players.Select((client, i) => new { index = i, client })
        .OrderBy(client => client.client.Name)
        .GroupBy(client => client.index >= half).Select((group, index) => new
        {
            group,
            index
        }).ToList();

    string GetIconForState(string messageState)
    {
        return messageState switch
        {
            "CONNECTED" => "oi-account-login text-success mr-5",
            "DISCONNECTED" => "oi-account-logout text-danger mr-5",
            _ => ""
            };
    }
}

<div class="pt-15 pl-15 pr-15 d-flex flex-wrap flex-column flex-md-row justify-content-between w-full w-auto-lg">
    @if (groupedClients.Count > 0)
    {
        <div class="flex-fill flex-lg-grow-0 w-full w-md-half pr-md-10 pb-md-10">
            @foreach (var chat in Model.ChatHistory)
            {
                var message = chat.IsHidden && !ViewBag.Authorized ? chat.HiddenMessage : chat.Message;
                var stateIcon = GetIconForState(chat.Message);

                <div class="text-truncate">
                    <i class="oi @stateIcon"></i>

                    <span>
                        <color-code value="@chat.Name"></color-code>
                    </span>
                    @if (stateIcon == "")
                    {
                        <span class="text-truncate">
                            &mdash;
                            <span class="text-white-dm text-black-lm">
                                <color-code value="@message?.CapClientName(48)"></color-code>
                            </span>
                        </span>
                    }
                </div>
        
            }
                <hr class="d-block d-md-none"/>
        </div>
    }

    <div class="d-flex flex-row w-full w-md-half pl-md-10 pb-md-10">
        
        @foreach (var clientIndex in groupedClients)
        {
            <div class="@(clientIndex.index == 1 ? "pl-md-10" : "pr-md-10") w-half w-xl-full">
                @foreach (var client in clientIndex.group)
                {
                    var levelColorClass = !ViewBag.Authorized || client.client.LevelInt == 0 ? "text-light-dm text-dark-lm" : $"level-color-{client.client.LevelInt}";
                    <div class="d-flex @(clientIndex.index == 1 ? "justify-content-start ml-auto flex-row-reverse" : "ml-auto") w-full w-xl-200">
                        <has-permission entity="AdminMenu" required-permission="Update">
                            <a href="#actionModal" class="profile-action" data-action="kick" data-action-id="@client.client.ClientId" aria-hidden="true">
                                <i class="oi oi-circle-x font-size-12 @levelColorClass @(clientIndex.index == 1 ? "ml-5" : "mr-5")"></i>
                            </a>
                        </has-permission>
                        <a asp-controller="Client" asp-action="Profile" asp-route-id="@client.client.ClientId" class="@levelColorClass no-decoration text-truncate">
                            <color-code value="@client.client.Name"></color-code>
                        </a>
                    </div>
                }
            </div>
        }
         @if (groupedClients.Count > 0)
         {
             <br/>
         }
    </div>
</div>