techgarage-ir.MTWireGuard/UI/Pages/Components/LogsView.razor

@using MTWireGuard.Application.Models.Mikrotik
@{
    int LogCount = Logs.Count <= 20 ? Logs.Count : 20;
    var LastLogs = Logs.TakeLast(LogCount).ToList();
}
<div class="dropdown-header bg-light dark:bg-white dark:bg-opacity-10">
    <strong>You have @Logs.Count logs</strong>
</div>
@for (int i = 0; i < LogCount; i++)
{
    var log = LastLogs[i];
    <a class="dropdown-item" href="#">
        <div class="message">
            <div>
                <small class="text-medium-emphasis">#@log.Id</small>
                <small class="text-medium-emphasis float-end mt-1">@log.Time</small>
            </div>
            <div class="font-weight-bold text-medium-emphasis text-truncate">@log.Message</div>
            <div class="text-truncate small">
                @foreach (var topic in log.Topics)
                {
                    switch (topic.ToLower())
                    {
                        case "system":
                            <span class="badge text-bg-dark mx-1">@topic</span>
                            break;
                        case "info":
                            <span class="badge text-bg-info mx-1">@topic</span>
                            break;
                        case "error":
                        case "critical":
                            <span class="badge text-bg-danger mx-1">@topic</span>
                            break;
                        case "account":
                            <span class="badge text-bg-secondary mx-1">@topic</span>
                            break;
                        case "dhcp":
                        case "ppp":
                        case "l2tp":
                        case "pptp":
                        case "sstp":
                        default:
                            <span class="badge text-bg-light border border-secondary mx-1">@topic</span>
                            break;
                    }
                }
            </div>
        </div>
    </a>
}

@code {
    [Parameter]
    public List<LogViewModel> Logs { get; set; }
}