@using Dpz.Core.EnumLibrary
@using System.Globalization
@model IList<Dpz.Core.Public.ViewModel.Steam.VmSteamGame>

<div class="steam-container">
    <div class="steam-header">
        <h1 class="steam-header__title">
            <i class="fa fa-gamepad"></i> Steam 游戏库
        </h1>
    </div>

    <div class="steam-game-grid">
        @foreach (var item in Model.OrderBy(x => x.Name, StringComparer.Create(new CultureInfo("zh-Hans"), false)))
        {
            var time = TimeSpan.FromMinutes(item.PlayTime);
            <div class="steam-game-card">
                <a asp-controller="Steam" asp-action="Achievements" asp-route-id="@item.Id"
                   class="steam-game-card__link" data-pjax>
                    <div class="steam-game-card__image-wrapper">
                        <img src="@item.ImageLogo" alt="@item.Name" class="steam-game-card__image lazy"
                             data-src="@item.ImageLogo"/>
                    </div>
                    <div class="steam-game-card__content">
                        <h2 class="steam-game-card__title">@item.Name</h2>
                        <div class="steam-game-card__meta">
                            <i class="fa-regular fa-clock"></i>
                            <span>@($"{time.TotalHours:0} 小时 {time.Minutes:00} 分钟")</span>
                        </div>

                        <div class="steam-game-card__achievements">
                            <partial name="AchievementSummary" model="item.Achievements"/>
                        </div>
                    </div>
                </a>
            </div>
        }
    </div>

    @{
        var commentModel = (CommentNode.Steam, "Index");
    }
    <div style="margin-top: var(--spacing-xl);">
        <partial name="_GlobalCommentPartial" model="commentModel"/>
    </div>
</div>