component SettingsStyle(user *arn.User)
	SettingsTabs

	h1.page-title Style settings

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

			.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")
		
		if arn.IsDevelopment()
			.widget.mountable(data-api="/api/settings/" + user.ID)
				h3.widget-title
					Icon("paint-brush")
					span= stringutils.Capitalize(user.Settings().Theme)

				InputColor("TextColor", "text-color", "Text color:")
				InputColor("LinkColor", "link-color", "Link color:")
				InputColor("UIBackground", "ui-background", "UI background:")
				InputColor("BackgroundColor", "bg-color", "Background color:")