{% extends "base.html" %}

{% block title %}Red link page{% endblock %}

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

{% block header %}{% endblock %}

{% block main %}
<h1>Nothing in the library yet with: {{ title }}</h1>
<h2>Add this potential book:</h2>
<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 %}
  <div style="width: 200px:"
  <form method="POST" action="{{ url_for('add_book') }}" enctype=multipart/form-data>
    {{ form.csrf_token }}
    <div class="form-group">{{ form.title.label }} {{ form.title(size=20, class="form-control") }}</div>
    <br>
    <div data-toggle="fieldset" id="phone-fieldset">
         {{ form.author.label }}  <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 }}</td>
                    <td><button type="button" data-toggle="fieldset-remove-row" id="phone-{{loop.index0}}-remove">-</button></td>
                </tr>
            {% endfor %}
        </table>
    </div>
<br>
<div class="form-group">{{ form.category.label }} {{ form.category(size=20, class="form-control") }}</div>
    {{ form.file }}
    {{ form.upload }}
    {{ form.wish }}
</form>
<p><a href="{{ url_for('home') }}">go back home</a>?</p>
</div>
{% endblock %}