component Settings(user *arn.User)
	h1.page-title Settings
	.widgets
		.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")

		.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.AnimePlanet.Nick", user.Accounts.AnimePlanet.Nick, "AnimePlanet", "Your username on anime-planet.com")

		.widget.mountable
			h3.widget-title
				Icon("bell")
				span Notifications
			
			#enable-notifications.widget-input
				label Enable:
				button.action(data-action="enableNotifications", data-trigger="click")
					Icon("toggle-off")
					span Enable notifications

			#disable-notifications.widget-input
				label Disable:
				button.action(data-action="disableNotifications", data-trigger="click")
					Icon("toggle-on")
					span Disable notifications

			#test-notification.widget-input
				label Test:
				button.action(data-action="testNotification", data-trigger="click")
					Icon("paper-plane")
					span Send test notification

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

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

				a#facebook.button.social-account-button(href="/auth/facebook")
					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)

		.widget.mountable
			h3.widget-title
				Icon("upload")
				span Export
			
			.widget-input
				label JSON:
				a.button(href="/api/animelist/" + user.ID)
					Icon("upload")
					span Export anime list as JSON

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

			.widget-input
				label Android App:
				a.button(href="https://www.youtube.com/watch?v=opyt4cw0ep8", target="_blank", rel="noopener")
					Icon("android")
					span Get the Android App
		
		.widget.mountable
			h3.widget-title
				Icon("picture-o")
				span Avatar
			
			.widget-input(data-api="/api/settings/" + user.ID)
				label(for="Avatar.Source") Source:
				select.widget-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
				
				if "Gravatar" == "Gravatar"
					.profile-image-container.avatar-preview
						img.profile-image(src=user.Gravatar(), alt="Gravatar")

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

		//- 	InputText("TitleLanguage", user.Settings().TitleLanguage, "Title language", "Language of anime titles")