{% extends "base.html" %}


{% block css %}
<style type="text/css">
  h1, p{
    text-align:left;
  }
  h1{
    font-size:44px;
    margin:40px 0 30px;
  }
  p{
    font-size:14px;
    margin:15px 0;
  }
</style>
{% endblock %}

{% block main %}
<h1>Nothing in the library yet with: {{ title }}</h1>
<br>
<div class="container">
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <div class="alert alert-danger">
        <ul>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      </div>
    {% endif %}
  {% endwith %}
  {%if light%}
  {%else%}
  <div style="width: 220px; float: left; padding-right: 40px;">
    <img class="no_cover" width="220" src = '/static/img/default_cover.gif';>
  </div>
  <br>

  <div>
        <h2>Add this book:</h2>

  <form method="POST" action="{{ url_for('add_book') }}" enctype=multipart/form-data>
    {{ form.csrf_token }}
    <div class="form-group">Title: {{ form.title (size=34, class="form-control") }}</div>
    <br>
    <div data-toggle="fieldset" id="phone-fieldset">
         Author(s):  <button type="button" data-toggle="fieldset-add-row"
                                          data-target="#phone-fieldset">+</button>
        <table>
            <tr>
                <th></th>
                <th></th>
            </tr>
            {% for author in form.author %}
                <tr data-toggle="fieldset-entry">
                    <td>{{ author.author_name (size=40)}}</td>
                    <td><button type="button" data-toggle="fieldset-remove-row" id="phone-{{loop.index0}}-remove">-</button></td>
                </tr>
            {% endfor %}
        </table>
    </div>
</div>
<div style="padding-left:10px; padding-bottom: 100px;">
  <br>
  Category: {{ form.category(size=27, class="form-control") }}
<br>
<br>
    {{ form.file }}
    {{ form.upload }}
    {{ form.wish }}
</form>
<br>
<br>
</div>
  {%endif%}
<div class= "Container" style= "border-top: dashed; border-width: 1px;">
<h2> More potential books </h2>
<table class="library_table" id="table" style="width:100%">
    <thead>
    <tr id="header">
      <th width="70px;">Cover</th>
      <th>Title</th>
      <th width="400px;">Author</th>
      <th width="100px;">Year</th>
      <th width="100px;">Category</th>
      <th width="100px;">Stack</th>
      {%if light%}
      {%else%}
      <th width="100px;">Add to a stack</th>
      {%endif%}
    </tr>
    </thead>
    <tbody>
        {% for book in books %}
    <tr>
      <td style= "padding: 5px;">

        <img class="no_cover" id="{{ book.title }}" src="/cover/{{ book.cover }}" width="70" onerror="if (this.src != '/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';">
      <!--  <object class="no_cover" data="../static/img/default_cover.png" type="image/png" width="65">
          <p hidden="True"></p>

      </object>-->
      </td>
      <td class="title_col"><a href="/books/{{ book.id }}">{{ book.title }}</a></td>

      <td class="author_col">  {% for author in book.authors %}

              <li><a href="{{url_for('show_author_by_id', id=author.id)}}">{{ author.author_name }}</a>  </li>

        {% endfor %}</td>
      <td id='fileformat'>{{ book.year_published }}</td>
      <td>{{ book.category}}</td>
      <td>
        {% for stack in book.stacks %}

              <li><a href="{{url_for('show_stack_by_id', id=stack.id)}}">  </a>

                {{ stack.stack_name }}
                  </li>

      {% endfor %}


              </td>
              {%if light%}
              {%else%}
      <td id='plus'><a href="{{url_for('add_to_stack', id=book.id)}}">

      ===>
              </a></td>
              {%endif%}
    </tr>

  {% endfor %}
</tbody>
  </table>
</div>

{% endblock %}