{{template "header.html" .S}}

{{with .List}}
<form method="POST" action="/list/{{.ListID}}">
	<div class="mb-3">
		<label class="form-label" for="title">Title</label>
		<input class="form-control" type="text" id="title" value="{{.Title}}" name="title">
	</div>
	<div class="mb-3">
		<label class="form-label" for="description">Description</label>
		<textarea class="form-control" id="description" rows="5" name="description">{{range .Description}}{{.}}{{end}}</textarea>
	</div>
	<div class="text-end">
	<button type="submit" class="btn btn-primary">Save</button>
	<a href="/list/{{.ListID}}" class="btn btn-secondary">Cancel</a>
	</div>
</form>
{{end}}

<br />

{{$listID := .List.ListID}}
{{range .List.Books}}
<div class="card mb-3">
  <div class="row g-0">
	<div class="col-md-1 d-flex align-items-center justify-content-center">
	  <a href="/book/{{.ID}}" title="{{.Description}}">
		{{if .Cover}}<img class="rounded" src="/cover/{{.ID}}/small/{{.Title}}.jpg" alt="{{.Title}}" />{{end}}
	  </a>
	</div>
	<div class="col-md-11">
	  <div class="card-body">
		<p class="card-title">
		  <span class="text-muted">[{{if .Lang}}{{.Lang}}{{end}}]</span>
		  <a href="/book/{{.ID}}" title="{{.Description}}"><strong>{{.Title}}</strong></a>
		  <span class="text-muted">{{if .Publisher}}{{.Publisher}}{{end}}</span>
		</p>
		<div class="card-text row">
		  <p class="col-9">
			{{range $i, $author := .Authors}}
			  {{if $i}}<span class="text-muted">&amp;</span>{{end}}
			  {{$author}}</a>
			{{end}}
		  </p>
		  <div class="col-3">
			<div class="btn-group d-flex justify-content-end">
	          <a href="/list/{{$listID}}/remove/{{.ID}}" class="btn btn-danger">
				<svg class="bi" width="1em" height="1em" fill="currentColor">
				  <use xlink:href="/img/bootstrap-icons.svg#trash"/>
				</svg>
			    remove
			  </a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</div>
{{end}}

{{template "footer.html" .S}}