@model SharedLibraryCore.Dtos.PlayerInfo
@{
    string match = System.Text.RegularExpressions.Regex.Match(Model.Name.ToUpper(), "[A-Z]").Value;
    string shortCode = match == string.Empty ? "?" : match;
    var loc = SharedLibraryCore.Utilities.CurrentLocalization.LocalizationIndex;
    string gravatarUrl = Model.Meta.FirstOrDefault(m => m.Key == "GravatarEmail")?.Value;
    bool isTempBanned = Model.ActivePenaltyType == "TempBan";
    var informationMeta = Model.Meta
        .Where(_meta => _meta.Type == SharedLibraryCore.Dtos.ProfileMeta.MetaType.Information)
        .ToList();
}

<div id="profile_wrapper" class="pb-3 row d-flex flex-column flex-lg-row">
    <!-- Initial/Avatar Column -->
    <div id="profile_avatar" class="d-block d-lg-inline-flex flex-column mr-auto ml-auto mr-lg-0 ml-lg-0 justify-content-center text-center level-bgcolor-@Model.LevelInt @(isTempBanned ? "penalties-bgcolor-tempban" : "")" style="background-image:url('@string.Format("https://gravatar.com/avatar/{0}?size=168&default=blank&rating=pg", gravatarUrl)')">
        @if (string.IsNullOrEmpty(gravatarUrl))
        {
            <span class="profile-shortcode">@shortCode</span>
        }
    </div>
    <!-- Name/Level Column -->
    <div class="d-block d-lg-inline-flex flex-column flex-fill text-center text-lg-left pb-3 pb-lg-0 pt-3 pt-lg-0 pl-3 pr-3">
        <div class="mt-n2 flex-fill d-block d-lg-inline-flex">
            <div id="profile_name" class="client-name h1 mb-0">@Model.Name</div>
            @if (ViewBag.Authorized)
            {
                <div id="profile_aliases_btn" class="oi oi-caret-bottom h3 ml-0 ml-lg-2 mb-0 pt-lg-2 mt-lg-1"></div>
            }
        </div>
        @if (ViewBag.Authorized)
        {
            <div id="profile_aliases" class="text-muted pt-0 pt-lg-2 pb-2">
                @foreach (var linked in Model.LinkedAccounts)
                {
                    @Html.ActionLink(linked.Value.ToString("X"), "ProfileAsync", "Client", new { id = linked.Key }, new { @class = "link-inverse" })<br />
                }
                @foreach (string alias in Model.Aliases)
                {
                    @alias<br />
                }

                @foreach (string ip in Model.IPs)
                {
                    <a class="ip-locate-link" href="#" data-ip="@ip">@ip</a><br />
                }
            </div>
        }
        <div id="profile_level" class="font-weight-bold h4 mb-0 level-color-@Model.LevelInt @(isTempBanned ? "penalties-color-tempban" : "")">
            @Model.Level @(isTempBanned ? $"({loc["WEBFRONT_PROFILE_TEMPBAN"]})" : "")
        </div>
    </div>
    @if (ViewBag.Authorized)
    {
        <div class="pr-lg-0 text-center text-lg-right">
            @if (Model.LevelInt < (int)ViewBag.User.Level && !Model.HasActivePenalty)
            {
                <div id="profile_action_ban_btn" class="profile-action oi oi-lock-unlocked text-success h3 ml-2" title="Ban Client" data-action="ban" aria-hidden="true"></div>
            }

            @if (Model.LevelInt < (int)ViewBag.User.Level && Model.HasActivePenalty)
            {
                @if (isTempBanned)
                {
                    <div id="profile_action_ban_btn" class="profile-action oi oi-lock-unlocked text-success h3 ml-2" title="Ban Client" data-action="ban" aria-hidden="true"></div>
                    <div id="profile_action_unban_btn" class="profile-action oi oi-lock-locked penalties-color-tempban h3 ml-2" title="Unban Client" data-action="unban" aria-hidden="true"></div>
                }
                else
                {
                    <div id="profile_action_unban_btn" class="profile-action oi oi-lock-locked text-danger h3 ml-2" title="Unban Client" data-action="unban" aria-hidden="true"></div>
                }
            }

            @if (Model.LevelInt != -1)
            {
                <div id="profile_action_edit_btn" class="profile-action oi oi-cog text-muted h3 ml-2" title="Client Options" data-action="edit" aria-hidden="true"></div>
            }
        </div>
    }
</div>

<div id="profile_info" class="row d-block d-lg-flex flex-row border-bottom border-top pt-2 pb-2">
    <div id="profile_meta_0" class="text-center text-lg-left mr-0 mr-lg-4">
        @for (int i = 0; i < informationMeta.Count; i += 3)
        {
            <div class="profile-meta-entry">
                <span class="profile-meta-value text-primary">@informationMeta[i].Value</span>
                <span class="profile-meta-title text-muted"> @informationMeta[i].Key</span>
            </div>
        }
    </div>

    <div class="text-center text-lg-left mr-0 mr-lg-4" id="profile_meta_1">
        @for (int i = 1; i < informationMeta.Count; i += 3)
        {
            <div class="profile-meta-entry">
                <span class="profile-meta-value text-primary">@informationMeta[i].Value</span>
                <span class="profile-meta-title text-muted"> @informationMeta[i].Key</span>
            </div>
        }
    </div>

    <div class="text-center text-lg-left" id="profile_meta_2">
        @for (int i = 2; i < informationMeta.Count; i += 3)
        {
            <div class="profile-meta-entry">
                <span class="profile-meta-value text-primary">@informationMeta[i].Value</span>
                <span class="profile-meta-title text-muted"> @informationMeta[i].Key</span>
            </div>
        }
    </div>
</div>

<div class="row d-md-flex pt-2">
    <div id="profile_events" class="text-muted text-left ml-sm-0">
        @await Component.InvokeAsync("ProfileMetaList", new { clientId = Model.ClientId, count = 30, offset = 0 })
    </div>
</div>

<div class="row">
    <div class="oi oi-chevron-bottom text-center mt-2 btn btn-primary btn-block loader-load-more" title="Load more meta" data-action="unban" aria-hidden="true"></div>
</div>

@section targetid {
    <input type="hidden" name="targetId" value="@Model.ClientId" />
}

@section scripts {
    <environment include="Development">
        <script type="text/javascript" src="~/js/loader.js"></script>
        <script type="text/javascript" src="~/js/profile.js"></script>
    </environment>
    <script>initLoader('/Client/Meta/@Model.ClientId', '#profile_events', 30);</script>
}