@model MumbleGalleryViewModel

@{
    if (Model.Images.Count == 0)
    {
        return;
    }

    var galleryClass = Model.Images.Count > 9 ? 9 : Model.Images.Count;
}

<div class="@Model.CssClass mumble-gallery mumble-gallery--@galleryClass">
    @for (var i = 0; i < Model.Images.Count; i++)
    {
        var imageUrl = Model.Images[i];
        var thumbUrl = Model.ViewHelper.GetThumbnailUrl(imageUrl);
        var isHidden = Model.Images.Count > 9 && i >= 8;
        
        <div class="mumble-gallery__item@(isHidden ? " is-hidden" : "")">
            <div class="mumble-gallery__loading">
                <i class="fa fa-spinner fa-spin"></i>
            </div>
            <img src="@thumbUrl" 
                 data-origin="@imageUrl"
                 alt="图片 @(i+1)" 
                 loading="lazy"
                 class="mumble-gallery__image">
        </div>
    }
    @if (Model.Images.Count > 9)
    {
        <div class="mumble-gallery__item mumble-gallery__more">
            <span>+@(Model.Images.Count - 8)</span>
        </div>
    }
</div>