{% extends 'site_base.html' %}

{% block extra_head %}
<script type="text/javascript">
$(document).ready(function() {
{% if defaults.location %}
  var locationId = {{ defaults.location }}
  $('#id_location').children().each(function() {
    if ($(this).attr("value") == locationId) {
      $(this).attr("selected", "selected");
      }
    });
{% endif %}
{% if defaults.owner %}
  var ownerId = {{ defaults.owner }}
  $('#id_owner').children().each(function() {
    if ($(this).attr("value") == ownerId) {
      $(this).attr("selected", "selected");
      }
    }); 
{% endif %}
  });
</script>
<script type="text/javascript" src="/media/js/formset.js"></script>
<script type="text/javascript" src="/media/js/bookform.js"></script>

<link rel="stylesheet" href="/media/css/form.css" />

{% endblock %}

{% block content %}

<form action="/add/" method="POST" enctype="multipart/formdata">

  <div id="formErrors">
    <div id="loading">Loading...</div>
    {{ form.errors }}

  <div id="messages">
{% if messages %}
<ul>
    {% for message in messages %}
    <li>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
  </div>


  </div>





  <div id="userFields">

    <div id="isbn">

      <label class="fixedWidth" for="id_isbn">ISBN Code:</label><br /> {{ form.isbn}} &nbsp; <button id="lookupIsbn" onclick="return false;">Lookup ISBN</button>

    </div>

    <p>
      <label class="fixedWidth" for="id_tags">Tags: </label><br />
      {{ form.tags }}
    </p>

    <p>
      <label class="fixedWidth" for="id_description">Description: </label><br />
      {{ form.description }}
    </p>

    <p>
      <label for="id_owner">Owner: </label><br />
      {{ form.owner }} <span class="addButton" data_field="owner"><img src="/media/images/plus.gif"></a></span>
    </p>

    <p>
      <label for="id_location">Location: </label><br />
      {{ form.location }} <span class="addButton" data_field="location"><img src="/media/images/plus.gif"></span>
    </p>

    <p id="submitBtn">
      <input type="submit" value="Submit" id="submitButton" />
    </p>
  </div>

  <div id="autoFields">
    <p>
      <label for="id_title">Title: </label><br />
      {{ form.title}}
      <img class="loadingimage" src="/media/images/loading.gif">    
    </p>

    <p>
      <label for="id_authors">Authors: </label><br />  
      {{ form.authors}}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

    <p>
      <label for="id_publisher">Publisher: </label><br />
      {{ form.publisher }}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

    <p>
      <label for="id_published">Published: </label><br />
      {{ form.published }}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

    <p>
      <label for="id_autotags">AutoTags: </label>
      {{ form.autotags }}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

    <p>
      <label for="id_pages">Pages: </label><br />
      {{ form.pages }}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

    <p>
      <label for="id_weight">Weight: </label><br />
      {{ form.weight }}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

    <p>
      <label for="id_dimensions">Dimensions: </label><br />
      {{ form.dimensions }}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

    <p>
      <label for="id_first_sentence">First Sentence: </label><br />
      {{ form.first_sentence }}
      <img class="loadingimage" src="/media/images/loading.gif">   
    </p>

  </div>
  <div id="formsets">
    {% for formset in formsets %}
    <div id="{{formset.prefix}}" class="formset">
      <div class="formset_title">
        {{formset.prefix}} <span class="formset_no_results"></span>
        <!-- <img class="button_loadingimage" src="/media/images/loading.gif"> -->
      </div>
      <div class='formset_meta'>
        {{ formset.management_form }}
      </div>
      <div class="formset_forms">
        {% for form in formset.forms %}
        <div class="formset_form">
          {{ form.as_p }}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}

  </div>

  

</form>

{% endblock %}