component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, uri string)
	ProfileHeader(viewUser, user, uri)

	if len(animeList.Items) == 0
		p.no-data.mountable= viewUser.Nick + " hasn't added any anime yet."
	else
		.profile-watching-list.mountable
			each item in animeList.Items
				if item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusCompleted
					a.profile-watching-list-item.tip(href=item.Anime().Link(), aria-label=item.Anime().Title.ByUser(user) + " (" + fmt.Sprint(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
						img.profile-watching-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user), importance="high")

	.footer
		.buttons
			if user != nil && (user.Role == "admin" || user.Role == "editor")
				a.button.profile-action(href="/api/user/" + viewUser.ID, target="_blank", rel="noopener")
					Icon("search-plus")
					span JSON

component ProfileTabs(viewUser *arn.User, uri string)
	.tabs.mountable.never-unmount
		Tab("Anime", "th", "/+" + viewUser.Nick)
		Tab("Characters", "child", "/+" + viewUser.Nick + "/characters/liked")
		Tab("Forum", "comment", "/+" + viewUser.Nick + "/forum/threads")
		Tab("Tracks", "music", "/+" + viewUser.Nick + "/soundtracks/liked")
		Tab("Quotes", "quote-left", "/+" + viewUser.Nick + "/quotes/liked")
		Tab("Stats", "area-chart", "/+" + viewUser.Nick + "/stats")
		Tab("Followers", "users", "/+" + viewUser.Nick + "/followers")
	
	if strings.Contains(uri, "/soundtracks")
		.tabs
			Tab("Liked", "heart", "/+" + viewUser.Nick + "/soundtracks/liked")
			Tab("Added", "plus", "/+" + viewUser.Nick + "/soundtracks/added")

	if strings.Contains(uri, "/quotes")
		.tabs
			Tab("Liked", "heart", "/+" + viewUser.Nick + "/quotes/liked")
			Tab("Added", "plus", "/+" + viewUser.Nick + "/quotes/added")

component ProfileHeader(viewUser *arn.User, user *arn.User, uri string)
	ProfileHead(viewUser, user, uri)
	ProfileTabs(viewUser, uri)

component ProfileHead(viewUser *arn.User, user *arn.User, uri string)
	.profile
		img.profile-cover.lazy(data-src=viewUser.CoverLink("large"), data-webp="true", alt="Cover image")

		.profile-image-container.mountable.never-unmount
			ProfileImage(viewUser)

		.profile-info.mountable.never-unmount
			h1#nick= viewUser.Nick
			.profile-introduction!= markdown.Render(viewUser.Introduction)
			
			.profile-tags-container
				.profile-tags
					a.profile-tag.mountable.never-unmount(href="/+" + viewUser.Nick + "/animelist/watching", data-mountable-type="header")
						Icon("list")
						span= fmt.Sprintf("%d anime", len(viewUser.AnimeList().Items))
					
					if viewUser.Website != ""
						a.profile-tag.mountable.never-unmount(href=viewUser.WebsiteURL(), target="_blank", rel="nofollow", aria-label="Website", data-mountable-type="header")
							Icon("home")
							span= viewUser.WebsiteShortURL()
					
					//- if viewUser.Accounts.Osu.Nick != "" && viewUser.Accounts.Osu.PP >= 100
					//- 	a.profile-tag.tip.mountable.never-unmount(href="https://osu.ppy.sh/u/" + viewUser.Accounts.Osu.Nick, aria-label="osu! | Level " + fmt.Sprint(int(viewUser.Accounts.Osu.Level)) + " | Accuracy: " + fmt.Sprintf("%.1f", viewUser.Accounts.Osu.Accuracy) + "%", target="_blank", rel="noopener", data-mountable-type="header")
					//- 		Icon("trophy")
					//- 		span= fmt.Sprint(int(viewUser.Accounts.Osu.PP)) + " pp"

					//- if viewUser.Accounts.Overwatch.BattleTag != "" && viewUser.Accounts.Overwatch.SkillRating >= 1000
					//- 	a.profile-tag.tip.mountable.never-unmount(href="https://playoverwatch.com/en-us/career/pc/" + strings.Replace(viewUser.Accounts.Overwatch.BattleTag, "#", "-", 1), aria-label=fmt.Sprintf("Overwatch | %s", stringutils.Capitalize(viewUser.Accounts.Overwatch.Tier)), target="_blank", rel="noopener", data-mountable-type="header")
					//- 		Icon("overwatch")
					//- 		span= fmt.Sprint(viewUser.Accounts.Overwatch.SkillRating) + " SR"
					
					//- if viewUser.Accounts.FinalFantasyXIV.Nick != "" && viewUser.Accounts.FinalFantasyXIV.Class != ""
					//- 	.profile-tag.tip.mountable.never-unmount(aria-label=fmt.Sprintf("Final Fantasy XIV | Level %d | IL %d", viewUser.Accounts.FinalFantasyXIV.Level, viewUser.Accounts.FinalFantasyXIV.ItemLevel), data-mountable-type="header")
					//- 		Icon("gamepad")
					//- 		span= viewUser.Accounts.FinalFantasyXIV.Class

					if viewUser.Registered != ""
						.profile-tag.mountable.never-unmount(title="Member since", data-mountable-type="header")
							Icon("calendar")
							span= viewUser.RegisteredTime().Format("Jan 2006")
					
					if viewUser.IsPro()
						a.profile-tag.mountable.never-unmount(href="/support", aria-label="Supporter", data-mountable-type="header")
							Icon("star")
							span.profile-pro-status-text PRO
					
					if viewUser.Role != ""
						a.profile-tag.mountable.never-unmount(href="/users/staff", aria-label="Staff member", data-mountable-type="header")
							Icon("rocket")
							span= stringutils.Capitalize(viewUser.Role)
					
					if !viewUser.IsActive()
						.profile-tag.mountable.never-unmount(title="Hasn't been online for the past 2 weeks", data-mountable-type="header")
							Icon("bed")
							span Inactive

					//- if user != nil && user.ID != viewUser.ID
					//- 	a.button.profile-action(href="/compare/animelist/" + user.Nick + "/" + viewUser.Nick)
					//- 		Icon("exchange")
					//- 		span Compare
					
					//- a.button.profile-action(href="/+" + viewUser.Nick + "/recommended/anime")
					//- 	Icon("archive")
					//- 	span Recomms

					//- if user != nil && (user.Role == "editor" || user.Role == "admin")
					//- 	a.button.profile-action(href="/+" + viewUser.Nick + "/log")
					//- 		Icon("edit")
					//- 		span Log
		
		.profile-actions
			if user != nil && user.ID != viewUser.ID
				if !user.Follows().Contains(viewUser.ID)
					button.profile-action.action.mountable.never-unmount(data-action="followUser", data-trigger="click", data-api="/api/userfollows/" + user.ID + "/add/" + viewUser.ID)
						Icon("user-plus")
						span Follow
				else
					button.profile-action.action.mountable.never-unmount(data-action="unfollowUser", data-trigger="click", data-api="/api/userfollows/" + user.ID + "/remove/" + viewUser.ID)
						Icon("user-times")
						span Unfollow