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

{{$submissionID := .SubmissionID}}
{{with .Book}}
<div class="row">
{{if .Cover}}
  <div class="d-none d-sm-block col-sm-4">
	<img src="/cover/{{.ID}}/big/{{.Title}}.jpg" alt="{{.Title}}" class="img-fluid float-end" />
  </div>
{{end}}

  <div class="col-sm-8">
	<form method="POST"
      {{if $submissionID}}
		action="/submission/{{$submissionID}}/save/{{.ID}}">
      {{else}}
		action="/save/{{.ID}}">
      {{end}}
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
      	  <label class="col-form-label" for="title">Title</label>
        </div>
        <div class="col-sm-10">
      	  <input class="form-control" type="text" id="title" value="{{.Title}}" name="title">
        </div>
      </div>
      <br />
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
          <label class="col-form-label" for="author">Author</label>
        </div>
        <div class="col-sm-10">
		  <div class="row">
            {{range .Authors}}
            <div class="col-sm-6">
              <input class="form-control" type="text" id="author" value="{{.}}" name="author">
            </div>
            {{end}}
            <div class="col-sm-6">
              <input class="form-control" type="text" id="author" placeholder="Add author" name="author">
            </div>
		  </div>
        </div>
      </div>
      <br />
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
          <label class="col-form-label" for="publisher">Publisher</label>
        </div>
      	<div class="col-sm-10">
      	<input class="form-control" type="text" id="publisher" value="{{.Publisher}}" name="publisher">
      	</div>
      </div>
      <br />
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
          <label class="col-form-label" for="tags">Tags</label>
        </div>
      	<div class="col-sm-10">
      	<input class="form-control" type="text" id="tags" value="{{strings_join .Tags ","}}" name="tags" placeholder="Add tag and hit enter">
      	</div>
      </div>
      <br />
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
          <label class="col-form-label" for="tags">ISBN</label>
        </div>
      	<div class="col-sm-10">
      	<input class="form-control" type="text" id="isbn" value="{{.Isbn}}" name="isbn">
      	</div>
      </div>
      <br />
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
          <label class="col-form-label" for="date">Date</label>
        </div>
      	<div class="col-sm-10">
      	<input class="form-control" type="text" id="date" value="{{.Date}}" name="date">
      	</div>
      </div>
      <br />
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
          <label class="col-form-label" for="lang">Lang</label>
        </div>
      	<div class="col-sm-10">
      	<input class="form-control" type="text" id="langs" value="{{.Lang}}" name="lang">
      	</div>
      </div>
      <br />
      <div class="row g-3 align-items-center">
        <div class="col-sm-2 text-sm-end">
          <label class="col-form-label" for="description">Description</label>
        </div>
      	<div class="col-sm-10">
      	<textarea class="form-control" id="description" rows="5" name="description">{{.Description}}</textarea>
      	</div>
      </div>
      <br />
      <div class="form-actions">
      	<button type="submit" class="btn btn-primary">Save</button>
      	<a href="/book/{{.ID}}" class="btn">Cancel</a>
      </div>
	</form>
  </div>
</div>
{{end}}

<script src="/js/tokenfield.min.js"></script>
<script>
var tf = new Tokenfield({
	el: document.querySelector('#tags'),
	items: [
		{{range $i, $tag := .Tags}}
		{id: 1000 + {{$i}}, name: '{{$tag}}'},
		{{end}}
	],
	setItems: [
		{{range $i, $tag := .Book.Tags}}
		{id: {{$i}}, name: '{{$tag}}'},
		{{end}}
	],
	delimiters: [","],
	newItems: true
});
tf.on('change', function() {
	const tag_list = tf.getItems().map((i) => i.name).join();
	document.querySelector('#tags').value = tag_list;
});
</script>

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