component Groups(groups []*arn.Group, nextIndex int, user *arn.User) .tabs Tab("Latest", "users", "/groups") Tab("Popular", "globe", "/groups/popular") if user != nil Tab("Joined", "user-plus", "/groups/joined") h1.page-title Groups .corner-buttons if user != nil if user.DraftIndex().GroupID == "" button.action(data-action="newObject", data-trigger="click", data-type="group") Icon("plus") span New group else a.button(href="/group/" + user.DraftIndex().GroupID + "/edit") Icon("pencil") span Edit draft #load-more-target.groups GroupsScrollable(groups, user) if nextIndex != -1 .buttons LoadMore(nextIndex) component GroupsScrollable(groups []*arn.Group, user *arn.User) each group in groups a.group.mountable(href=group.Link()) img.group-image.lazy(data-src=group.ImageLink("small"), data-webp="true", data-color=group.AverageColor(), alt=group.Name) .group-info h3.group-name= group.Name .group-tagline= group.Tagline .group-member-count Icon("user") span= len(group.Members)