component CharacterTabs(character *arn.Character, user *arn.User)
	.tabs
		Tab("Character", "user", character.Link())
		Tab("Edit", "pencil", character.Link() + "/edit")
		Tab("Images", "image", character.Link() + "/edit/images")
		Tab("History", "history", character.Link() + "/history")

component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime, quotes []*arn.Quote, friends []*arn.User, relevantCharacters []*arn.Character, mainQuote *arn.Quote, user *arn.User)
	.character-page
		.character-left-column
			.character-header
				.character-image-container.mountable
					img.character-image-large.lazy(data-src=character.ImageLink("large"), data-webp="true", data-color=character.AverageColor(), alt=character.Name.Canonical)
					
					.buttons
						LikeButton(strconv.Itoa(len(character.Likes)), "heart", "character", character, user)

						if user != nil && (user.Role == "editor" || user.Role == "admin")
							a.button.tip.mountable(href=character.Link() + "/edit", aria-label="Edit character")
								RawIcon("pencil")
				
				.character-description-container
					h1.character-name.mountable= character.Name.Canonical

					.anime-alternative-title.mountable
						if character.Name.Japanese != ""
							Japanese(character.Name.Japanese)
					
					if mainQuote != nil
						.character-quote
							Quote(mainQuote, user)
					
					.character-description.mountable!= markdown.Render(character.Description)
			
					h3.mountable Anime

					.character-anime.mountable
						each anime in characterAnime
							a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime")
								img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
					
					if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0])
						h3.mountable Quotes

						.character-quotes.mountable
							each quote in quotes
								if mainQuote == nil || quote.ID != mainQuote.ID
									.character-quote
										Quote(quote, user)

		.character-sidebar
			if len(character.Attributes) > 0
				h3.mountable Information

				table.character-attributes.mountable
					each attribute in character.Attributes
						tr.mountable(data-mountable-type="info")
							td.character-attributes-name= attribute.Name + ":"

							if strings.Contains(attribute.Value, "<")
								td.character-attributes-value!= markdown.Render(attribute.Value)
							else
								td.character-attributes-value= attribute.Value
			
			if len(relevantCharacters) > 0
				h3.mountable Relevant

				.relevant-characters.mountable
					each relevantCharacter in relevantCharacters
						.mountable(data-mountable-type="relevant-character")
							CharacterSmall(relevantCharacter, user)
			
			if len(friends) > 0
				.character-friends
					h3.mountable Friends

					.user-avatars.mountable
						each friend in friends
							.mountable(data-mountable-type="friend")
								if friend.IsActive()
									Avatar(friend)
								else
									.inactive-user
										Avatar(friend)

			h3.mountable Links

			.light-button-group.mountable
				if character.GetMapping("myanimelist/character") != ""
					a.light-button(href="https://myanimelist.net/character/" + character.GetMapping("myanimelist/character"), target="_blank", rel="noopener")
						Icon("external-link")
						span MAL
				else if user != nil && (user.Role == "editor" || user.Role == "admin")
					a.light-button(href="https://myanimelist.net/character.php?q=" + character.Name.Canonical, target="_blank", rel="noopener")
						Icon("exclamation-triangle")
						span Error: No MAL ID
				
				a.light-button(href="/api" + character.Link(), target="_blank")
					Icon("code")
					span API