component SettingsTabs
	.tabs
		Tab("Personal", "user", "/settings")
		Tab("Accounts", "cubes", "/settings/accounts")
		Tab("Notifications", "bell", "/settings/notifications")
		Tab("Apps", "puzzle-piece", "/settings/apps")
		Tab("Formatting", "font", "/settings/formatting")
		Tab("PRO", "star", "/settings/pro")

component SettingsPersonal(user *arn.User)
	SettingsTabs

	h1.page-title Personal settings
	
	.settings
		.widget.mountable(data-api="/api/user/" + user.ID)
			h3.widget-title
				Icon("user")
				span Personal

			InputText("Nick", user.Nick, "Username", "Your username on notify.moe")
			InputText("Tagline", user.Tagline, "Tagline", "Text that appears below your username")
			InputText("Website", user.Website, "Website", "Your homepage")
			
			if arn.IsDevelopment()
				InputTextArea("Introduction", user.Introduction, "Introduction", "Tell us about yourself (Markdown is allowed)")
			
		.widget.mountable(data-api="/api/settings/" + user.ID)
			h3.widget-title
				Icon("camera")
				span Avatar

			//- .widget-section
			//- 	label(for="Avatar.Source") Source:
			//- 	select.widget-ui-element.action(id="Avatar.Source", data-field="Avatar.Source", value=user.Settings().Avatar.Source, data-action="save", data-trigger="change")
			//- 		option(value="") Automatic
			//- 		option(value="Gravatar") Gravatar
			//- 		option(value="URL") Link
			//- 		option(value="FileSystem") Upload

			//- //- URL input
			//- if user.Settings().Avatar.Source == "URL"
			//- 	InputText("Avatar.SourceURL", user.Settings().Avatar.SourceURL, "Link", "Post the link to the image here")

			//- //- Gravatar preview image
			//- if user.Settings().Avatar.Source == "Gravatar" || (user.Settings().Avatar.Source == "" && user.Avatar.Source == "Gravatar")
			//- 	.profile-image-container.avatar-preview
			//- 		img.profile-image.mountable(src=user.Gravatar(), alt="Gravatar (" + user.Email + ")", title="Gravatar (" + user.Email + ")")
			
			//- //- URL preview image
			//- if user.Settings().Avatar.Source == "URL" && user.Settings().Avatar.SourceURL != ""
			//- 	.profile-image-container.avatar-preview
			//- 		img.profile-image.mountable(src=strings.Replace(user.Settings().Avatar.SourceURL, "http://", "https://", 1), alt="Avatar preview")
			
			//- //- File upload
			//- if user.Settings().Avatar.Source == "FileSystem"
			
			InputImage("avatar-input", "File", "/api/upload/avatar")

			.profile-image-container.avatar-preview
				if user.HasAvatar()
					img#avatar-input-preview.profile-image.lazy(data-src=user.AvatarLink("large"), data-webp="true", alt="Profile image", title="Recommended: 560 x 560 | PNG or JPG")
				else
					img#avatar-input-preview.profile-image.hidden(src=user.AvatarLink("large"), alt="Profile image", title="Recommended: 560 x 560 | PNG or JPG")

					#avatar-input-preview-svg
						SVGProfileImage(user)
		
		.widget.mountable(data-api="/api/settings/" + user.ID)
			h3.widget-title
				Icon("picture-o")
				span Cover
			
			InputImage("cover-input", "File", "/api/upload/cover")

			.cover-preview(title="Recommended: 1920 x 450 | PNG or JPG")
				img#cover-input-preview.profile-cover.lazy(data-src=user.CoverLink("small"), data-webp="true", alt="Cover image")
			
			if !user.IsPro()
				.footer
					p PRO account required.

component SettingsNotifications(user *arn.User)
	SettingsTabs

	h1.page-title Notification settings

	.settings
		.widget.mountable
			h3.widget-title
				Icon("bell")
				span Instant notifications
			
			#enable-notifications.widget-section
				label Instant notifications:
				button.action(data-action="enableNotifications", data-trigger="click")
					Icon("toggle-off")
					span OFF

			#disable-notifications.widget-section.hidden
				label Instant notifications:
				button.action(data-action="disableNotifications", data-trigger="click")
					Icon("toggle-on")
					span ON

			#test-notification.widget-section
				label Test:
				button.action(data-action="testNotification", data-trigger="click")
					Icon("paper-plane")
					span Send test notification
			
			.footer
				p(title="This setting is not account bound, instead it is bound to your browser.") You can customize this setting on every device you own.
		
		.widget.mountable(data-api="/api/settings/" + user.ID)
			h3.widget-title
				Icon("filter")
				span Filter
			
			InputBool("Notification.AnimeEpisodeReleases", user.Settings().Notification.AnimeEpisodeReleases, "New episodes", "Notifications about new episodes")
			InputBool("Notification.AnimeFinished", user.Settings().Notification.AnimeFinished, "Finished anime series", "Notifications about finished anime series")
			//- InputBool("Notification.NewFollowers", user.Settings().Notification.NewFollowers, "New followers", "Notifications about new followers")
		
		//- .widget.mountable(data-api="/api/settings/" + user.ID)
		//- 	h3.widget-title
		//- 		Icon("heart")
		//- 		span Likes
			
		//- 	InputBool("Notification.ForumLikes", user.Settings().Notification.ForumLikes, "Forum post likes", "Notifications about forum post likes")
		//- 	InputBool("Notification.SoundTrackLikes", user.Settings().Notification.SoundTrackLikes, "Soundtrack likes", "Notifications about soundtrack likes")
		//- 	//- InputBool("Notification.GroupPostLikes", user.Settings().Notification.GroupPostLikes, "Group post likes", "Notifications about group post likes")
		//- 	InputBool("Notification.QuoteLikes", user.Settings().Notification.QuoteLikes, "Quote likes", "Notifications about quote likes")

component SettingsApps(user *arn.User)
	SettingsTabs

	h1.page-title App settings

	.settings
		.widget.mountable
			h3.widget-title
				Icon("puzzle-piece")
				span Apps
			
			.widget-section
				label Chrome Extension:
				button.action(data-action="installExtension", data-trigger="click")
					Icon("chrome")
					span Get the Chrome Extension

			.widget-section
				label Firefox Extension:
				a.button(href="https://addons.mozilla.org/en-US/firefox/addon/anime-notifier/", target="_blank", rel="nofollow")
					Icon("firefox")
					span Get the Firefox Extension

			.widget-section
				label Android Web App:
				a.button(href="https://www.youtube.com/watch?v=opyt4cw0ep8", target="_blank", rel="noopener")
					Icon("android")
					span Get the Android Web App

			.widget-section
				label Desktop Web App:
				button.action(data-action="installApp", data-trigger="click")
					Icon("desktop")
					span Get the Desktop Web App

component SettingsFormatting(user *arn.User)
	SettingsTabs

	h1.page-title Formatting settings

	.settings
		.widget.mountable(data-api="/api/settings/" + user.ID)
			h3.widget-title
				Icon("font")
				span Formatting

			.widget-section
				label(for="Theme")= "Theme:"
				select.widget-ui-element.action(id="Theme", data-field="Theme", value=user.Settings().Theme, title="Language of anime titles", data-action="save", data-trigger="change")
					option(value="light") Light
					option(value="dark") Dark
			
			.widget-section
				label(for="TitleLanguage")= "Title language:"
				select.widget-ui-element.action(id="TitleLanguage", data-field="TitleLanguage", value=user.Settings().TitleLanguage, title="Language of anime titles", data-action="save", data-trigger="change")
					option(value="canonical") Canonical
					option(value="english") English
					option(value="romaji") Romaji
					option(value="japanese") 日本語

			InputNumber("Format.RatingsPrecision", float64(user.Settings().Format.RatingsPrecision), "Ratings precision", "How many decimals after the comma would you like to display in ratings on anime pages?", "0", "2", "1")

component SettingsPro(user *arn.User)
	SettingsTabs

	h1.page-title PRO settings

	.settings
		.widget.mountable(data-api="/api/settings/" + user.ID)
			h3.widget-title
				Icon("star")
				span PRO
			
			if user.IsPro()
				.widget-section
					label
						span Your PRO account expires in 
						span.utc-date(data-date=user.ProExpires)
						span .
					a.button(href="/shop")
						Icon("star")
						span Extend PRO account duration
			else
				.widget-section
					label Would you like to support the site development?
					a.button(href="/support")
						Icon("star")
						span Go PRO

component SettingsAccounts(user *arn.User)
	SettingsTabs

	h1.page-title Accounts settings

	.settings
		.widget.mountable(data-api="/api/user/" + user.ID)
			h3.widget-title
				Icon("cubes")
				span Accounts

			InputText("Accounts.AniList.Nick", user.Accounts.AniList.Nick, "AniList", "Your username on anilist.co")
			InputText("Accounts.MyAnimeList.Nick", user.Accounts.MyAnimeList.Nick, "MyAnimeList", "Your username on myanimelist.net")
			InputText("Accounts.Kitsu.Nick", user.Accounts.Kitsu.Nick, "Kitsu", "Your username on kitsu.io")
			InputText("Accounts.Osu.Nick", user.Accounts.Osu.Nick, "Osu", "Your username on osu.ppy.sh")
			InputText("Accounts.Overwatch.BattleTag", user.Accounts.Overwatch.BattleTag, "Overwatch", "Your battletag on Overwatch")
			//- InputText("Accounts.AnimePlanet.Nick", user.Accounts.AnimePlanet.Nick, "AnimePlanet", "Your username on anime-planet.com")

		.widget.mountable
			h3.widget-title
				Icon("user-plus")
				span Connect

			.widget-section.social-account
				label(for="google") Google:
				
				a#google.button.social-account-button(href="/auth/google", data-ajax="false")
					if user.Accounts.Google.ID != ""
						Icon("check")
						span Connected
					else
						Icon("circle-o")
						span Not connected
			
			.widget-section.social-account
				label(for="facebook") Facebook:

				a#facebook.button.social-account-button(href="/auth/facebook", data-ajax="false")
					if user.Accounts.Facebook.ID != ""
						Icon("check")
						span Connected
					else
						Icon("circle-o")
						span Not connected

		.widget.mountable
			h3.widget-title
				Icon("download")
				span Import
			
			ImportLists(user)

		if len(user.AnimeList().Items) > 0
			.widget.mountable
				h3.widget-title
					Icon("upload")
					span Export
				
				.widget-section
					label JSON:
					a.button(href="/api/animelist/" + user.ID, target="_blank")
						Icon("upload")
						span Export anime list as JSON