@{
    Layout = null;
    var loc = Utilities.CurrentLocalization.LocalizationIndex;

    var canSeeLevel = (ViewBag.PermissionsSet as IEnumerable<string>).HasPermission(WebfrontEntity.ClientLevel, WebfrontPermission.Read) && Model.PunisherLevel != 0;
    var punisherLevelClass =  canSeeLevel ? $"level-color-{(int)Model.PunisherLevel}" : "text-light-dm text-dark-lm";
}

@using WebfrontCore.Permissions
@model SharedLibraryCore.Dtos.PenaltyInfo

<!-- desktop -->
<tr class="d-none d-lg-table-row">
    <td colspan="20%">
        <a asp-controller="Client" asp-action="Profile" asp-route-id="@Model.OffenderId" class="link-inverse">
            <color-code value="@Model.OffenderName"></color-code>
        </a>
    </td>
    <td colspan="10%" class="penalties-color-@Model.PenaltyTypeText.ToLower()">
        @ViewBag.Localization[$"WEBFRONT_PENALTY_{Model.PenaltyType.ToString().ToUpper()}"]
    </td>
    <td colspan="35%">
        <color-code value="@($"{Model.Offense}{(ViewBag.Authorized ? Model.AdditionalPenaltyInformation : "")}")"></color-code>
    </td>
    <td colspan="20%">
        <a asp-controller="Client" asp-action="Profile" asp-route-id="@Model.PunisherId" class="@punisherLevelClass">
            <color-code value="@Model.PunisherName"></color-code>
        </a>
    </td>
    <td colspan="15%" class="text-right">
        @if (Model.Expired)
        {
            <span>@Model.TimePunishedString</span>
        }
        else
        {
            <span>@Model.TimeRemaining</span>
        }
    </td>
</tr>

<!-- mobile -->
<tr class="d-table-row d-lg-none d-flex border-bottom">
    <td class="bg-primary text-light text-right">
        <div class="mt-5 mb-5">@loc["WEBFRONT_PENALTY_TEMPLATE_NAME"]</div>
        <div class="mt-5 mb-5">@loc["WEBFRONT_PENALTY_TEMPLATE_TYPE"]</div>
        <div class="mt-5 mb-5">@loc["WEBFRONT_PENALTY_TEMPLATE_OFFENSE"]</div>
        <div class="mt-5 mb-5">@loc["WEBFRONT_PENALTY_TEMPLATE_ADMIN"]</div>
        <div class="mt-5 mb-5">@loc["WEBFRONT_PENALTY_TEMPLATE_TIME"]</div>
    </td>
    <td class="flex-fill">
        <div class="mt-5 mb-5">
            <a asp-controller="Client" asp-action="Profile" asp-route-id="@Model.OffenderId" >
                <color-code value="@Model.OffenderName"></color-code>
            </a>
        </div>
        <div class="mt-5 mb-5 penalties-color-@Model.PenaltyTypeText.ToLower()">
            @ViewBag.Localization[$"WEBFRONT_PENALTY_{Model.PenaltyType.ToString().ToUpper()}"]
        </div>
        <div class="mt-5 mb-5">
            <color-code value="@($"{Model.Offense}{(ViewBag.Authorized ? Model.AdditionalPenaltyInformation : "")}")"></color-code>
        </div>
        <a asp-controller="Client" asp-action="Profile" asp-route-id="@Model.PunisherId" class="mt-5 mb-5 @((!ViewBag.Authorized && ViewBag.EnablePrivilegedUserPrivacy) || Model.PunisherLevel == 0 ? "text-dark-lm text-light-dm" : "level-color-" + (int)Model.PunisherLevel)">
            <color-code value="@Model.PunisherName"></color-code>
        </a>
        <div class="mt-5 mb-5">
            @if (Model.Expired)
            {
                <span>@Model.TimePunishedString</span>
            }
            else
            {
                <span>@Model.TimeRemaining</span>
            }
        </div>
    </td>
</tr>