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

{% block header %}
<script>
  function control_modal(op, modal_id) {
    modal_elm = document.getElementById(modal_id);
    if (op == 'active') {
      modal_elm.classList.add('active');
    } else {
      modal_elm.classList.remove('active');
    }
  }
</script>
{% endblock %}

{% block user_content %}
<div class="panel">
  <div class="modal" id="modal-addnote">
    <a onclick="control_modal('diactiate', 'modal-addnote')" class="modal-overlay" aria-label="Close"></a>
    <div class="modal-container">
      <div class="modal-header">
        <a onclick="control_modal('diactiate', 'modal-addnote')" class="btn btn-clear float-right"
          aria-label="Close"></a>
        <div class="modal-title h5">新建评论</div>
      </div>
      <div class="modal-body">
        <form id="modal-form" method="post" class="form-group" action="/note/create/{{book['book_id']}}/">
          <label class="form-label" for="notename">标题</label>
          <input class="form-input" name="notename" id="notename" required>
          <label class="form-label" for="notecontent">评论</label>
          <textarea name="notecontent" id="notecontent" class="form-input" placeholder="添加评论..." rows="8"
            required></textarea>

        </form>
      </div>
      <div class="modal-footer">
        <input form="modal-form" class="btn btn-primary" type="submit" value="提交">
        <a href="" class="btn">取消</a>
      </div>
    </div>
  </div>
  <div class="panel-header m-2">
    <div class="panel-title h3">图书：{{book['book_name']}}</div>
    <div class="divider"></div>
    {%if booktype|length > 0 %}
    <div>
      <mark>分类标签：</mark>
      {% for atype in booktype %}
      <span class="chip"> {{atype['type_name']}}</span>
      {% endfor %}
    </div>
    {%endif%}
    {%if book['book_author']%}
    <div class="py-1">
      <mark>作者：</mark><span class="px-2">{{book['book_author']}}</span>
    </div>
    {% endif %}
    {%if book['book_publisher']%}
    <div class="py-1">
      <mark>出版社：</mark><span class="px-2">{{book['book_publisher']}}</span>
    </div>
    {% endif %}
    {%if book['book_isbn']%}
    <div class="py-1">
      <mark>ISBN：</mark><span class="px-2">{{book['book_isbn']}}</span>
    </div>
    {% endif %}
    {%if book['book_lang']%}
    <div class="py-1">
      <mark>语言：</mark><span class="px-2">{{book['book_lang']}}</span>
    </div>
    {% endif %}
    <div class="divider"></div>
    <div class="columns">
      <div class="column col-2">
        <a href="/book/update/{{book['book_id']}}/" class="btn btn-primary">编辑图书信息</a>
      </div>
      <div class="divider-vert"></div>
      <div class="column col-6">
        <form method="post" class="form-group p-centered" action="/doc/upload/{{book['book_id']}}/"
          enctype="multipart/form-data">
          <input class="form-input form-inline col-9" type="file" name="file" required>
          <input class="btn btn-primary input-group-btn form-inline" type="submit" value="上传">
        </form>
      </div>
      <div class="divider-vert"></div>
      <div class="column">
        <button href="" class="btn btn-primary" onclick="control_modal('active', 'modal-addnote')">添加评论</button>
      </div>
    </div>
  </div>
  <div class="panel-body">
    <div class="divider text-center" data-content="文档"></div>
    {% if document|length <= 0 %} <div class="text-center">暂无</div>{%endif%}
    {% for document in documents %}
    <div id="doc{{document['doc_id']}}" class="card">
      <div class="card-header">
        <div class="card-title h5">{{document['doc_name']}}</div>
        <div class="card-subtitle">
          <span><mark>大小</mark> {{document['doc_size']}} KB</span>
          <span><mark>日期</mark>{{document['doc_date']}}</span>
          <div class="float-right">
            <a href="/doc/download/{{document['doc_id']}}/" class="btn btn-primary">下载</a>
            <a href="/doc/delete/{{document['doc_id']}}/" class="btn">删除</a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  <div class="divider text-center" data-content="评论"></div>
  {% if notes|length <= 0 %} <div class="text-center">暂无</div> {%endif%}
  {% for note in notes %}
  <div id="note{{note['note_id']}}" class="card m-2">
    <div class="card-header">
      <div class="card-title h5">{{note['note_name']}}</div>
      <div class="card-subtitle">
        <span><mark>日期</mark>{{note['note_date']}}</span>
        <div class="float-right">
          <a href="/note/delete/{{note['note_id']}}/" class="btn">删除</a>
        </div>
      </div>
    </div>
    <div class="card-body">
      <p style="word-wrap:break-word; word-break:break-all; white-space:pre-wrap;">{{note['note_content']}}</p>
    </div>
  </div>
  {% endfor %}
  <div class="divider text-center"></div>
</div>
{% endblock %}