{{range .}}
<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 .Authors}}{{.}}, {{end}}</p>
		  <div class="col-3">
			<div class="btn-group d-flex justify-content-end">
			  <a href="{{download_url .}}" class="btn btn-dark btn-sm">
				<svg class="bi" width="1em" height="1em" fill="currentColor">
				  <use xlink:href="/img/bootstrap-icons.svg#file-earmark-arrow-down"/>
				</svg>
			    download
			  </a>
			  <a href="/read/{{.ID}}" class="btn btn-warning btn-sm">
				<svg class="bi" width="1em" height="1em" fill="currentColor">
				  <use xlink:href="/img/bootstrap-icons.svg#eyeglasses"/>
				</svg>
				read it!
			  </a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</div>
{{end}}