@model IList<SharedLibraryCore.Dtos.PlayerInfo>
@{
    var loc = SharedLibraryCore.Utilities.CurrentLocalization.LocalizationIndex;
}

<div class="row d-none d-lg-block ">
    <h4 class="pb-2 text-center col-12">@ViewBag.Title</h4>
    <div class="mr-auto ml-auto col-12 col-lg-8 border-bottom">
        <div class="row pt-2 pb-2 bg-primary">
            <div class="col-5 ">@loc["WEBFRONT_PENALTY_TEMPLATE_NAME"]</div>
            <div class="col-4">@loc["WEBFRONT_PROFILE_LEVEL"]</div>
            <div class="col-3 text-right">@loc["WEBFRONT_SEARCH_LAST_CONNECTED"]</div>
        </div>

        @foreach (var client in Model)
        {
            <div class="row pt-2 pb-2 bg-dark">
                <div class="col-5">
                    <a asp-controller="Client" asp-action="ProfileAsync" asp-route-id="@client.ClientId">
                        <color-code value="@client.Name" allow="@ViewBag.EnableColorCodes"></color-code>
                    </a>
                </div>
                <div class="col-4 level-color-@client.LevelInt">@client.Level</div>
                <div class="col-3 text-right">@client.LastConnectionText</div>
            </div>
        }
    </div>
</div>
<div class="row d-lg-none">
    <div class="w-100 bg-primary text-center h3 mb-0 p-3" style="border-bottom: 1px solid #222">@ViewBag.Title</div>
    @foreach (var client in Model)
    {
        <div class="col-5 bg-primary font-weight-bold" style="border-bottom: 1px solid #222">
            <div class="p-2">@loc["WEBFRONT_PENALTY_TEMPLATE_NAME"]</div>
            <div class="p-2">@loc["WEBFRONT_PROFILE_LEVEL"]</div>
            <div class="p-2">@loc["WEBFRONT_SEARCH_LAST_CONNECTED"]</div>
        </div>
        <div class="col-7 bg-dark border-bottom">
            <div class="p-2">
                <a asp-controller="Client" asp-action="ProfileAsync" asp-route-id="@client.ClientId" class="link-inverse">
                    <color-code value="@client.Name" allow="@ViewBag.EnableColorCodes"></color-code>
                </a>
            </div>
            <div class="p-2 level-color-@client.LevelInt">@client.Level</div>
            <div class="p-2 text-white-50">@client.LastConnectionText</div>
        </div>
    }
</div>