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 == ""
				if user.IsPro()
					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)