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

{{$role := .S.Role}}
{{$downloadCounter := .DownloadCounter}}
{{with .Book}}
<script>
function delBook(){
	const div = document.getElementById('delete');
	div.classList.remove("visually-hidden");
}
function closeAlert() {
	const div = document.getElementById('delete');
	div.classList.add("visually-hidden");
}
</script>
<div id="delete" class="alert alert-danger fade visually-hidden show" role="alert">
  <div class="row">
	<div class="col-11">
	<h4 class="alert-heading">Do you really want to delete it?</h4>
	<p>Remove a book is permanent, you won't be able to get it back</p>
	<a class="btn btn-danger" href="/delete/{{.ID}}/">Remove it</a>
	<a class="btn" href="#" onClick="closeAlert();">Cancel</a>
	</div>
	<div class="col-1 justify-content-end">
	<button type="button" class="btn-close" onClick="closeAlert();"></button>
	</div>
  </div>
</div>

<header class="row justify-content-end">
	<h1>{{.Title}}
	{{if not .Active}}
	<span class="badge label-warning text-dark">waiting for moderation</span>
	{{end}}
	</h1>
</header>
<div class="row">
  {{if .Cover}}
	<div class="col-sm-4 text-center">
		<img src="/cover/{{.ID}}/big/{{.Title}}.jpg" alt="{{.Title}}" class="float-sm-end img-fluid" />
	</div>
  {{end}}

  <div class="col-sm-8">
    <div class="row">
      <div class="col-md-8">
        <dl class="row">
          {{if .Authors}}
            <dt class="col-sm-3 text-sm-end">Authors</dt>
        	<dd class="col-sm-9 text-start">
				{{range $i, $author := .Authors}}
				  {{if $i}}&amp;{{end}}
				  <a href="/search/?q=author:{{$author}}">{{$author}}</a>
				{{end}}
			</dd>
          {{end}}
          {{if .Publisher}}
            <dt class="col-sm-3 text-sm-end">Publisher</dt>
        	<dd class="col-sm-9 text-start"><a href="/search/?q=publisher:{{.Publisher}}">{{.Publisher}}</a></dd>
          {{end}}
          {{if .Tags}}
            <dt class="col-sm-3 text-sm-end">Tags</dt>
        	<dd class="col-sm-9 text-start">
			  {{range $i, $tag := .Tags}}
			    {{if $i}},{{end}}
			    <a href="/search/?q=tag:{{$tag}}">{{$tag}}</a>
			  {{end}}
			</dd>
          {{end}}
          {{if .Isbn}}
            <dt class="col-sm-3 text-sm-end">ISBN</dt>
        	<dd class="col-sm-9 text-start">{{.Isbn}}</dd>
          {{end}}
          {{if .Date}}
            <dt class="col-sm-3 text-sm-end">Date</dt>
        	<dd class="col-sm-9 text-start">{{.Date}}</dd>
          {{end}}
          {{if .FileSize}}
            <dt class="col-sm-3 text-sm-end">Size</dt>
        	<dd class="col-sm-9 text-start">{{printf "%.2f" (size2mb .FileSize)}} MB</dd>
          {{end}}
          {{if .Lang}}
            <dt class="col-sm-3 text-sm-end">Lang</dt>
        	<dd class="col-sm-9 text-start"><a href="/search/?q=lang:{{.Lang}}">{{.Lang}}</a> </dd>
          {{end}}
        </dl>
      </div>
      <div class="col-md-4">
		<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 class="text-end">
      	  <small>Downloaded: {{$downloadCounter}} times</small>
      	</div>
        {{if eq $role "admin" "moderator"}}
      	  <div class="row"><p></p></div>
	      <div class="btn-group d-flex justify-content-end">
      	    <a href="/edit/{{.ID}}" class="btn btn-primary btn-sm">
	      	  <svg class="bi" width="1em" height="1em" fill="currentColor">
	      	    <use xlink:href="/img/bootstrap-icons.svg#pencil"/>
	      	  </svg>
	          edit
	        </a>
      	    <a href="#" onClick="delBook();" class="btn btn-danger btn-sm">
	      	  <svg class="bi" width="1em" height="1em" fill="currentColor">
	      	    <use xlink:href="/img/bootstrap-icons.svg#trash"/>
	      	  </svg>
	      	  delete
	        </a>
	      </div>
        {{end}}
      </div>
    </div>
{{end}}

	<div class="row">
	{{range .Description}}
		<p>{{.}}</p>
	{{end}}
	</div>
  </div>
</div>

{{if .Lists}}
<br />
<div class="row justify-content-center">
  <div class="col-10">
    <h4>Book in lists:</h4>
    <ul class="nav flex-column">
      {{range .Lists}}
	  <li class="nav-item">
		<a class="nav-link" href="/list/{{.ListID}}">
		  <div class="row">
			<div class="col">{{.Title}} ({{len .Books}})</div>
		    <div class="col text-end">By {{.User.Username}}</div>
		  </div>
		</a>
	  </li>
      {{end}}
    </ul>
  </div>
</div>
{{else}}
<br />
{{end}}

<br />
{{if .S.User}}
  <form method="POST" action="/list/">
    <div class="row g-3 align-items-start">
	    <h6 class="col-sm-2 text-sm-end col-form-label">Add book to a list:</h6>
		<input type="hidden" id="book_id" name="book_id" value="{{.Book.ID}}">
		<div class="col-sm-5">
		  <div class="input-group">
			<input class="form-control" list="bookListOptions" id="list" name="list" placeholder="Write a name of a list to create or add">
			<datalist id="bookListOptions">
				{{range .UserLists}}
				<option value="{{.}}">
				{{end}}
			</datalist>
			<button type="submit" class="btn btn-primary">Add</button>
		  </div>
		</div>
    </div>
  </form>
{{end}}

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