@model IEnumerable<SharedLibraryCore.Dtos.ServerInfo>
@using WebfrontCore.ViewModels

<div class="content mt-20 row">
    <div class="col-12 col-lg-9 mt-0">
        <h2 class="content-title mb-0">@ViewBag.Localization["WEBFRONT_TOP_PLAYERS_TITLE"]</h2>
        <span class="text-muted">
            <color-code value="@(Model.FirstOrDefault(m => m.Endpoint == ViewBag.SelectedServerId)?.Name ?? ViewBag.Localization["WEBFRONT_STATS_INDEX_ALL_SERVERS"])"></color-code>
            &mdash; <span class="text-primary">@ViewBag.TotalRankedClients.ToString("#,##0")</span> @ViewBag.Localization["WEBFRONT_TOP_PLAYERS_SUBTITLE"]
        </span>

        <div id="topPlayersContainer">
            @await Component.InvokeAsync("TopPlayers", new { count = 25, offset = 0, serverEndpoint = ViewBag.SelectedServerId })
        </div>
        <div class="text-center">
            <i id="loaderLoad" class="oi oi-chevron-bottom loader-load-more text-primary mt-5" aria-hidden="true"></i>
        </div>
    </div>

    <!-- side context menu -->
    @{
        var menuItems = new SideContextMenuItems
        {
            MenuTitle = ViewBag.Localization["WEBFRONT_CONTEXT_MENU_GLOBAL_GAME"],
            Items = Model.Select(server => new SideContextMenuItem
            {
                IsLink = true,
                Reference = Url.Action("TopPlayers", "Stats", new { serverId = server.Endpoint }),
                Title = server.Name.StripColors(),
                IsActive = ViewBag.SelectedServerId == server.Endpoint
            }).Prepend(new SideContextMenuItem
            {
                IsLink = true,
                Reference = Url.Action("TopPlayers", "Stats"),
                Title = ViewBag.Localization["WEBFRONT_STATS_INDEX_ALL_SERVERS"],
                IsActive = ViewBag.SelectedServerId is null
            }).ToList()
        };
    }
    <partial name="_SideContextMenu" for="@menuItems"></partial>
</div>

@section scripts
{
    <environment include="Development">
        <script type="text/javascript" src="~/js/stats.js"></script>
        <script type="text/javascript" src="~/lib/canvas.js/canvasjs.js"></script>
    </environment>
    <script>initLoader('/Stats/GetTopPlayersAsync', '#topPlayersContainer', 25, 25, [{ 'name': 'serverId', 'value' : () => @(ViewBag.ServerId ?? 0) }]);</script>
}