{{define "content" }}
  <h2>Upload a book</h2>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <div class="main-container">
      <div class="form-item">
        <div class="form-container">
          <label>Name:</label>
          <input type="text" name="name" value="{{.Name.Value}}" />
        </div>
        {{ if .Name.Err }}
        <div class="error">{{.Name.Err}}</div>
        {{ end }}
      </div>
      <div class="form-item">
        <div class="form-container">
          <label>Description:</label>
          <textarea rows="10" placeholder="Enter a descrption... (optional)" style="width: 100%;" name="description">{{.Description.Value}}</textarea>
        </div>
        {{ if .Description.Err }}
        <div class="error">{{.Description.Err}}</div>
        {{ end }}
      </div>
      <div class="form-item">
        <div class="form-container">
          <label>Editor:</label>
          <input type="text" name="editor" value="{{.Editor.Value}}" />
        </div>
        {{ if .Editor.Err }}
        <div class="error">{{.Editor.Err}}</div>
        {{ end }}
      </div>
      <div class="form-item">
        <div class="form-container">
          <label>Authors:</label>
          <input placeholder="Author one, Author two..." type="text" name="authors" value="{{.Authors.Value | join}}" />
        </div>
        {{ if .Authors.Err }}
        <div class="error">{{.Authors.Err}}</div>
        {{ end }}
      </div>
      <div class="form-item">
        <div class="form-container">
          <label>Year:</label>
          <input type="number" name="year" value="{{.Year.Value | year}}" />
        </div>
        {{ if .Year.Err }}
        <div class="error">{{.Year.Err}}</div>
        {{ end }}
      </div>
      <div class="form-item">
        <div class="form-container">
          <label>Keywords:</label>
          <input placeholder="engineering,music..." type="text" name="keywords" value="{{.Keywords.Value | join}}" />
        </div>
        {{ if .Keywords.Err }}
        <div class="error">{{.Keywords.Err}}</div>
        {{ end }}
      </div>
      <div class="form-item">
        <div class="form-container">
          <input type="file" name="file" files="{{.File.Value.Header | filename}}" accept=".pdf" />
          <button id="submit" type="submit">Upload</button>
        </div>
      </div>
    </div>
  </form>
  {{ if .File.Err }}
  <div class="error">{{.File.Err}}</div>
  {{ end }}
  {{ if ne .Error "" }}
  <div class="error">{{.Error}}</div>
  {{ end }}
{{ end }}

{{ define "script" }}
  var isSuccess = {{.IsSuccess }};
  var submit = document.getElementById("submit");
  submit.addEventListener("submit", function () {
    submit.disabled = true;
  });
  if (isSuccess) {
    alert("file uploaded successfully");
  }
{{ end }}