@model SharedLibraryCore.Dtos.ServerInfo
@{
    Layout = null;

    string GetMapName(string mapCode)
    {
        if (ViewBag.Maps?.Count == 0)
        {
            return mapCode;
        }

        return (ViewBag.Maps as List<Map>)?.FirstOrDefault(map => map.Name == mapCode)?.Alias ?? mapCode;
    }

    foreach (var snapshot in Model.ClientHistory.ClientCounts)
    {
        snapshot.MapAlias = GetMapName(snapshot.Map);
    }
}

<div class="card mt-20 mb-20 ml-0 mr-0 p-0">
    <div class="p-5 pl-10 pr-10 bg-primary rounded-top d-flex flex-column flex-lg-row flex-wrap justify-content-between text-light" id="server_header_@Model.ID">
        <!-- first column -->
        <div class="d-flex align-self-center flex-column-reverse flex-lg-row col-12 col-lg-6">
            <div class="ml-5 mr-5 text-center text-lg-left">
                <color-code value="@Model.Name"></color-code>
                <div class="server-header-ip-address font-weight-light" style="display:none">@(Model.ExternalIPAddress):@(Model.Port)</div>
            </div>
            <div class="d-flex justify-content-center">
                <!-- connect button -->
                <a href="@Model.ConnectProtocolUrl" class="text-light align-self-center server-join-button" title="@Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_HOME_JOIN_DESC"]">
                    <i class="oi oi-play-circle ml-5 mr-5"></i>
                </a>
                <has-permission entity="AdminMenu" required-permission="Write">
                    <!-- send message button -->
                    <a href="#actionModal" class="profile-action text-light align-self-center" data-action="chat" data-action-id="@Model.ID">
                        <i class="oi oi-chat ml-5 mr-5"></i>
                    </a>
                </has-permission>
                <!-- scoreboard button -->
                <a asp-controller="Server" asp-action="Scoreboard" asp-route-serverId="@Model.Endpoint" title="@ViewBag.Localization["WEBFRONT_TITLE_SCOREBOARD"]"
                   class="text-light align-self-center">
                    <i class="oi oi-spreadsheet ml-5 mr-5"></i>
                </a>
                <span class="ml-5 mr-5 text-light-dm text-primary-lm badge font-weight-light" data-toggle="tooltip" data-title="@ViewBag.Localization[$"GAME_{Model.Game}"]">@Utilities.MakeAbbreviation(ViewBag.Localization[$"GAME_{Model.Game}"])</span>
            </div>
        </div>
        <!-- second column -->
        <div class="col-12 align-self-center text-center text-lg-left col-lg-4">
            <span>@Model.Map</span>
            @if (!string.IsNullOrEmpty(Model.GameType) && Model.GameType.Length > 1)
            {
                <span>&ndash;</span>
                <span>@Model.GameType</span>
            }

        </div>
         <!-- third column -->
        <div class="align-self-center d-flex flex-column flex-lg-row col-12 col-lg-2 justify-content-end">
            @if (Model.LobbyZScore != null)
            {
                <div data-toggle="tooltip" data-title="@ViewBag.Localization["WEBFRONT_HOME_RATING_DESC"]" class="cursor-help d-flex flex-row-reverse flex-md-row justify-content-center">
                    <span>@(Model.LobbyZScore ?? 0)</span>
                    <span class="oi oi-bolt align-self-center" style="margin-right: 2px; margin-left:  2px"></span>
                </div>
            }
            <div class="mr-5 ml-5 align-self-center">
                <span class="server-clientcount">@Model.ClientCount</span>/<span class="server-maxclients">@(Model.MaxClients - Model.PrivateClientSlots)@(Model.PrivateClientSlots > 0 ? $" ({Model.MaxClients})": "")</span>
            </div>
        </div>
    </div>

    <div id="server_clientactivity_@Model.ID" class="bg-dark-dm bg-light-lm server-activity">
        <partial name="../Server/_ClientActivity" for="@Model"/>
    </div>
     
    @if (Model.Players.Any())
    {
        <div class="ml-15 mr-15">
            <hr/>
        </div>
    }

    <div class="server-history">
        <div class="server-history-row m-auto bg-dark-dm bg-light-lm rounded-bottom" style="position:relative; width: 100%" id="server_history_@Model.ID" data-serverid="@Model.ID" data-server-endpoint="@Model.Endpoint"
             data-clienthistory-ex='@Html.Raw(Json.Serialize(Model.ClientHistory.ClientCounts))'
             data-online="@Model.Online">
            <canvas id="server_history_canvas_@Model.ID" class="rounded-bottom" height="100"></canvas>
        </div>
    </div>
</div>