package main

const tem = `
{{define "top"}}
	<!DOCTYPE html>
	<html>
	<head>
	<title>{{.}}</title>
	<style>
		* {
			appearance:          none;
			--webkit-appearance: none;
			font-family: monospace;
			box-sizing:  border-box;
			color:       inherit;
			font-size:   12pt;
		}
		
		body {
			background-color: #b3b5b1;
			color:            #272825;
			margin:           1em;
		}

		body > * {
			margin:    auto;
			max-width: 40em;
			padding:   1em;
		}

		header {
			background-color:    #a2a89d;
			border:              1px solid #8f938c;
			border-bottom-color: #7f847b;
			border-radius:       4px 4px 0 0;
			text-shadow:         1px 1px 1px #b8bfb0;
			color:               #4c4f49;
		}

		main {
			background-color: #abaea8;
			border:           1px solid #959b91;
			border-top-color: #a1a59e;
			border-radius:    0 0 4px 4px;
		}
		
		h1 { font-size: 1.5em }

		hr {
			margin:        1em 0;
			border:        none;
			border-top:    1px solid #7f847b9e;
			border-bottom: 1px solid #56604f1c;
		}

		.formRow {
			margin: 1em 0;
		}

		button, input, textarea {
			margin: 0;
			border: 1px solid #7f847b;
			background-color: #b3b5b1;
			padding: 0.25em 0.5em;
			box-shadow: 1px 1px 0 inset #56604f38;
			border-radius: 2px;
			font-weight: normal;
		}

		textarea {
			height: 4em;
		}

		button:not(:active), input[type=submit]:not(:active) {
			box-shadow: -1px -1px 0 inset #56604f38;
		}

		button:active, input[type=submit]:active {
			border-color:   #757a71;
			padding-top:    calc(0.25em + 1px);
			padding-right:  calc(0.5em - 1px);
			padding-bottom: calc(0.25em - 1px);
			padding-left:   calc(0.5em + 1px);
		}

		.post {
			padding: 0.4em 0.5em;
			background-color: #a2a69f;
			border-radius: 2px;
			border: 1px solid #8f938c;
			margin: 1em 0;
		}

		.post .author {
			font-size: 0.7em;
			color: #5e625a;
			text-shadow: 1px 1px 0 #b3b5b1;
			margin-bottom: 0.3em;
		}

		*:last-child  { margin-bottom: 0 }
		*:first-child { margin-top:    0 }
	</style>
	</head>
	<body>
	<header>
		<h1>{{.}}</h1>
	</header>
	<main>
{{end}}

{{define "bottom"}}</main></body></html>{{end}}

{{define "post"}}
	<div class=post>
		<div class=author>{{.Author}}</div>
		<div class=content>{{.Content}}</div>
	</div>
{{end}}

{{define "postForm"}}
	<form method=POST action=actionPost>
		<div class=formRow>
			<input type=text name=author id=author placeholder="Name" required>
		</div>
		<div class=formRow>
			<textarea name=content id=content placeholder="Post content" required></textarea>
		</div>
		<div class=formRow>
			<input type=submit value="Post">
		</div>
	</form>
{{end}}

{{define "pageGeneric"}}
	{{template "top" .Title}}
	<p>{{.Content}}</p>
	{{template "bottom"}}
{{end}}

{{define "pageHome"}}
	{{template "top" "Home"}}
	{{template "postForm"}}
	<hr>
	{{range .}}
		{{template "post" .}}
	{{end}}
	{{template "bottom"}}
{{end}}
`
