<div class="customizer">
	<a href="{{ .Link }}" class="bookmark" style='background-color: {{ .GetColor }}; {{ if not .HideBorder }} box-shadow: 0px 0px 3px black; {{ end }}; {{ if not (eq .IconPadding "") }} padding: {{ .IconPadding }}; {{ end }}'>
		<div class="background" style='background-image: url("{{ .Image }}"); background-size: {{ .GetImageSize }}'></div>
	</a>

	<a class="delete"><span class="material-icons">delete</span></a>

	<form>
		<label for="bookmark-name">{{ .Translate "Name" }}</label>
		<input type="text" id="bookmark-name" name="bookmark-name" value="{{ .Title }}" />

		<label for="bookmark-link">{{ .Translate "Link" }}</label>
		<input type="url" id="bookmark-link" name="bookmark-link" value="{{ .Link }}" />

		<label for="bookmark-image">{{ .Translate "Image" }}</label>
		<input type="url" id="bookmark-image" name="bookmark-image" value="{{ .Image }}" />

		<label for="bookmark-imagesize">{{ .Translate "Image size" }}</label>
		<input list="image-sizes" id="bookmark-imagesize" name="bookmark-imagesize" value="{{ .ImageSize }}" />

		<label for="bookmark-iconpadding">{{ .Translate "Image padding" }}</label>
		<input list="image-paddings" id="bookmark-iconpadding" name="bookmark-iconpadding" value="{{ .IconPadding }}" />

		<label for="bookmark-color">{{ .Translate "Color" }}</label>
		<input type="color" id="bookmark-color" name="bookmark-color" value="{{ .Color }}" />

		<label for="bookmark-border">{{ .Translate "Hide border" }}</label>
		<input type="checkbox" id="bookmark-border" name="bookmark-border" {{ if .HideBorder }} checked {{ end }} />

		<label for="bookmark-order">{{ .Translate "Order priority" }}</label>
		<input type="number" id="bookmark-order" name="bookmark-order" value="{{ .Order }}" />
	</form>
</div>
