component Users(users []*arn.User, followerCount map[string]int, url string)
	h1.page-title Users
	UsersTabs(url)

	.user-cards
		each user in users
			UserCard(user, stringutils.Plural(followerCount[user.ID], "follower"))

component UsersByCountry(users []*arn.User, followerCount map[string]int, countryName string)
	if len(users) == 0
		p.no-data.mountable= "Seems like there are no active users in " + stringutils.Capitalize(countryName)
	else
		h1= "Users in " + users[0].Location.CountryName

		.user-cards
			each user in users
				UserCard(user, stringutils.Plural(followerCount[user.ID], "follower"))

component ProUsers(users []*arn.User, url string)
	h1.page-title Supporters
	UsersTabs(url)

	.user-cards
		each user in users
			UserCard(user, "until " + user.ProExpires[:10])
	
	footer.footer.mountable
		p We are thankful to everyone supporting the site!

component UserLists(groups []*utils.UserList, url string)
	h1.page-title Users
	UsersTabs(url)

	each group in groups
		h3.user-list-name.mountable= group.Name

		.user-cards
			each user in group.Users
				UserCard(user, stringutils.Capitalize(user.Role))

component StaffRecruitment
	footer.footer.mountable
		p
			a(href="https://github.com/animenotifier/notify.moe#installation", target="_blank", rel="noopener") Interested in contributing code?
			br
			a(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener") Interested in editing data?

component UsersTabs(url string)
	.tabs
		Tab("Active", "users", "/users")
		Tab("Editors", "pencil", "/users/editors")
		Tab("Supporters", "heart", "/users/pro")
		Tab("Staff", "user-secret", "/users/staff")
		//- Tab("Map", "map", "/users/map")