{{ template "base" . }}

{{ define "title" }}Details for {{ .Wine.Name }}{{ end }}

{{ define "header-left" }}
	<a class="pure-button" href="/">Back</a>
{{ end }}

{{ define "content" }}
<form class="pure-form pure-form-aligned" enctype="multipart/form-data" method="POST">
	{{ template "header" . }}

	<div class="content withfooter details pure-u-1">
		<div class="maxwidth box">
			<input type="hidden" name="id" value="{{ .Wine.ID }}">

			<fieldset>
				<div  class="pure-control-group">
					<label for="form-name">Name</label>
					<input id="form-name" type="text" name="name" value="{{ .Wine.Name }}" placeholder="Name">
				</div>

				<div  class="pure-control-group">
					<label for="form-rating">Rating</label>
					<input id="form-rating" type="number" name="rating" value="{{ .Wine.Rating }}" placeholder="Rating">
				</div>

				<div class="pure-control-group">
					<label for="form-country">
						Country (<a href="https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes#Current_ISO_3166_country_codes" target="_blank">ISO 3166 Alpha-2</a>)
					</label>
					<input id="form-country" type="text" name="country" value="{{ .Wine.Country }}" placeholder="XXX" pattern="[A-Z]{2}">
					{{ if ne .Wine.Country.String "XX" }}
						<img src="/static/flags/{{ .Wine.Country }}.png">
					{{ end }}
				</div>

				<div class="pure-control-group">
					<label for="form-new-picture">New picture</label>
					<input id="form-new-picture" type="file" name="picture" accept="image/png, image/jpeg">
					<!-- TODO: add a button to remove the image -->
				</div>

				<div class="pure-control-group">
					<label for="form-new-comment">Add comment</label>
					<textarea id="form-new-comment" name="comment" placeholder="Etaoin Shrdlu"></textarea>
				</div>
			</fieldset>

			{{ if .Wine.Comments }}
			<details open>
				<summary>Comments</summary>
				<ul>
					{{ range .Wine.Comments }}
					<li>{{ .Content }}</li>
					{{ end }}
				</ul>
			</details>
			{{ end }}

			{{ if .Wine.HasPicture }}
			<p>Here's a picture:<br/>

			<img class="foto pure-img" src="/details/img?id={{ .Wine.ID }}"/>
			{{ end }}
		</div>
	</div>

	<footer class="small pure-u-1">
		<div class="maxwidth box">
			<button type="submit" name="action" value="save" class="pure-button pure-button-primary">
				Save Changes
			</button>
			<button type="submit" name="action" value="delete" class="right pure-button button-warning">
				Delete
			</button>
		</div>
	</footer>
</form>
{{ end }}