<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ .Translate "Customize Homepage" }}</title>
	<link rel="stylesheet" type="text/css" href="/static/style.css" />
	<script src="/static/customize.js"></script>

	<style>
		:root {
			--bookmark-border-radius: {{ .Settings.BorderRadius }};
		}
		body {
			background-color: {{ .Settings.Background }};
			color: {{ .Settings.Foreground }};
		}
	</style>
</head>
<body>
	<datalist id="image-sizes">
		<option value="cover">cover</option>
		<option value="contain">contain</option>
		<option value="100%">100%</option>
		<option value="0px">0px</option>
	</datalist>
	<datalist id="image-paddings">
		<option value="10%">10%</option>
		<option value="0px">0px</option>
		<option value="10px">10px</option>
		<option value="1em">1em</option>
	</datalist>
	<datalist id="search-strings">
		<option value="https://www.google.de/search?q=%s">Google</option>
		<option value="https://duckduckgo.com/?q=%s">DuckDuckGo</option>
		<option value="https://www.startpage.com/do/search?query=%s">Startpage</option>
		<option value="https://www.bing.com/search?q=%s">Bing</option>
		<option value="https://de.search.yahoo.com/search?p=%s">Yahoo</option>
	</datalist>
	<main>
		<a id="button" class="fixed" href="#">
			<span class="material-icons">save</span>
		</a>
		<div id="top-panel">
			<h1>{{ .Translate "Settings" }}</h1>
			<form>
				<label for="search-string">{{ .Translate "Search engine" }}</label>
				<input list="search-strings" id="search-string" name="search-string" value="{{ .Settings.Search }}" />
				
				<label for="bg-color">{{ .Translate "Background color" }}</label>
				<input type="color" id="bg-color" name="bg-color" value="{{ .Settings.Background }}" />

				<label for="fg-color">{{ .Translate "Foreground color" }}</label>
				<input type="color" id="fg-color" name="fg-color" value="{{ .Settings.Foreground }}" />

				<label for="border-radius">{{ .Translate "Border radius" }}</label>
				<input type="text" id="border-radius" name="border-radius" value="{{ .Settings.BorderRadius }}" />
			</form>
		</div>
		<section id="customize-container">
			{{ range .Bookmarks }}
				{{ template "customize-bookmark.html" . }}
			{{ end }}

			<a id="add-bookmark"><span class="material-icons">add</span></a>
		</section>
	</main>
</body>
</html>
