{% extends 'user/user_base.html' %}

{% block header %}
  <script>
    var typelist = {};
    function switch_type(typename) {
        if (typelist.hasOwnProperty(typename)) {
            delete typelist[typename];
        } else {
            typelist[typename] = 1;
        }
        let typeinput = document.getElementById("booktype");
        let typestr = "";
        for (let typekey in typelist) {
            typestr += typekey + ";";
        }
        typeinput.value = typestr;
    }
    function create_type_button(typename) {

    }
  </script>
{% endblock %}

{% block user_content %}
<div class="panel">
  <div class="panel-header">
    <h2>编辑图书</h2>
  </div>
  <div class="panel-body">
      {%if error%}
      <div class="toast">
          {{error}}
      </div>
      {% endif %}
      <form method="post" class="form-group">
          <label class="form-label" for="bookname">书名</label>
          <input class="form-input" name="bookname" id="bookname" value="{{book['book_name']}}" required> 
          <label class="form-label" for="bookisbn">ISBN</label>
          <input class="form-input" name="bookisbn" id="bookisbn" value="{{book['book_isbn']}}">
          <label class="form-label" for="bookpublisher">出版社</label>
          <input class="form-input" name="bookpublisher" id="bookpublisher" value="{{book['book_publisher']}}">
          <label class="form-label" for="bookauthor">作者</label>
          <input class="form-input" name="bookauthor" id="bookauthor" value="{{book['book_author']}}">
          <label class="form-label" for="booklang">语言</label>
          <select class="form-select" name="booklang" id="booklang">
              <option selected>CN</option>
              <option>EN</option>
              <option>Other</option>
          </select>
          <label class="form-label" for="booktype">分类</label>
          <input class="form-input" name="booktype" id="booktype" value="{{booktype}}">
          <div>
              {% for atype in typelist%}
              <span class="chip btn" onclick="switch_type('{{atype['type_name']}}')">{{atype['type_name']}}</span>
              {% endfor %}
          </div>
          <input class="btn btn-primary input-group-btn p-centered" type="submit" value="提交">
      </form>
  </div>
</div>
{% endblock %}