<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>{{name}}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			body {
				padding: 20px;
				font-family: Arial, sans-serif;
			}
			h2 {
				line-height: 1;
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: black 1px solid;
			}
			h3 {
				line-height: 1;
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: lightgrey 1px solid;
			}
			.icon-test-container + h2 {
				margin-top: 80px;
			}
			.icon-test-size {
				margin-top: 40px;
			}
			.icon-test-size + .icon-test-size {
				_border-top: lightgrey 1px solid;
				margin-top: 20px;
				padding-top: 20px;
			}
			span {
				display: inline-block;
				margin-right: 20px;
				vertical-align: top;
				width: 50px;
				height: 50px;
			}
			span:hover {
				background-color: #FF8;
			}
			hr {
				margin: 20px 0;
			}
		</style>
		<link href="{{url cssPath previewPath}}" rel="stylesheet" />
	</head>
	<body>
		<h2>SVG</h2>
		<div class="icon-test-container {{attValue config/cssSvgPrefix}}">
			{{#sizes}}
				<div class="icon-test-size">
					{{#if label}}<h3>{{label}}</h3>{{/if}}
					{{#items}}
					<span class="{{attValue className}}" title="{{attValue className}}"></span>
					{{/items}}
				</div>
			{{/sizes}}
		</div>

		<h2>PNG</h2>
		<div class="icon-test-container {{attValue config/cssPngPrefix}}">
			{{#sizes}}
				<div class="icon-test-size">
					{{#if label}}<h3>{{label}}</h3>{{/if}}
					{{#items}}
					<span class="{{attValue className}}" title="{{attValue className}}"></span>
					{{/items}}
				</div>
			{{/sizes}}
		</div>
	</body>
</html>
