@model IPagedList<Dpz.Core.Public.ViewModel.Response.PictureRecordResponse>

@{
    // Prepare initial data if we wanted to dump JSON, but we are parsing DOM now.
    // Still good to have data attributes.
    var hasMore = Model.CurrentPageIndex < Model.TotalPageCount;
}

<div class="albums" 
     data-page-index="@Model.CurrentPageIndex" 
     data-page-size="@Model.PageSize"
     data-total-count="@Model.TotalItemCount"
     data-total-pages="@Model.TotalPageCount"
     data-has-more="@hasMore.ToString().ToLower()">

    <div class="albums__header">
        <h1 class="albums__title"><i class="fa fa-camera-retro"></i> 精彩瞬间</h1>
        <p class="albums__subtitle">记录生活，分享感动</p>
        <div class="albums__stats">
            <span>共 @Model.TotalItemCount 张照片</span>
            <span>第 @Model.CurrentPageIndex / @Model.TotalPageCount 页</span>
        </div>
    </div>

    <div class="albums__grid">
        @* 列宽基准元素，Masonry 通过此元素计算列宽，自身不可见 *@
        <div class="albums__grid-sizer"></div>
        @foreach (var picture in Model)
        {
            <div class="albums__item">
                <div class="albums__card">
                    <div class="albums__image-wrapper">
                        <img class="albums__image is-loaded"
                             src="@picture.AccessUrl!albums"
                             data-src-original="@picture.AccessUrl"
                             data-id="@picture.Id"
                             alt="@picture.Description"
                             width="@picture.Width"
                             height="@picture.Height"
                             loading="lazy" />
                        <div class="albums__overlay">
                            <div class="albums__actions">
                                <button class="albums__action-btn" data-action="download" data-url="@picture.AccessUrl" title="下载">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="albums__action-btn" data-action="share" data-url="@picture.AccessUrl" title="分享">
                                    <i class="fa fa-share"></i>
                                </button>
                            </div>
                            <div class="albums__info">
                                <div class="albums__desc">@picture.Description</div>
                                <div class="albums__meta">
                                    <div class="albums__meta-row">
                                        <span>@(picture.Creator?.Name ?? "Unknown")</span>
                                        <span>@picture.UploadTime.ToString("yyyy/MM/dd")</span>
                                    </div>
                                    <div class="albums__meta-row">
                                        <span>@picture.Width × @picture.Height</span>
                                        <span>@((picture.Length / 1024.0 / 1024.0).ToString("F2")) MB</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

    <div class="albums__loading">
        <div class="albums__spinner"></div>
    </div>
    
    <div class="albums__no-more" style="display: @(hasMore ? "none" : "block")">
        <p>已经到底啦 ~</p>
    </div>
</div>