@model MumbleGalleryViewModel

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

    var previewImageCount = Model.PreviewImageCount ?? (Model.Images.Count > 9 ? 8 : Model.Images.Count);
    previewImageCount = Math.Clamp(previewImageCount, 1, Model.Images.Count);

    var showMore = Model.Images.Count > previewImageCount;
    var galleryClass = Math.Min(previewImageCount + (showMore ? 1 : 0), 9);
}

<div class="@Model.CssClass mumble-gallery mumble-gallery--@galleryClass" data-gallery-id="@Model.Id">
    @for (var i = 0; i < Model.Images.Count; i++)
    {
        var image = Model.Images[i];
        var isHidden = showMore && i >= previewImageCount;
        var width = image.HasSize ? image.Width.ToString() : null;
        var height = image.HasSize ? image.Height.ToString() : null;

        <div class="mumble-gallery__item@(isHidden ? " is-hidden" : "")">
            <div class="mumble-gallery__loading">
                <i class="fa fa-spinner fa-spin"></i>
            </div>
            <img src="@image.ThumbnailUrl"
                 data-gallery-src="@image.Url"
                 data-gallery-width="@width"
                 data-gallery-height="@height"
                 data-origin="@image.Url"
                 width="@width"
                 height="@height"
                 alt="@image.Alt"
                 loading="lazy"
                 decoding="async"
                 class="mumble-gallery__image">
        </div>
    }
    @if (showMore)
    {
        <div class="mumble-gallery__item mumble-gallery__more" data-gallery-more="true">
            <span>+@(Model.Images.Count - previewImageCount)</span>
        </div>
    }
</div>