{% extends "generic_template.html" %}

{% block content %}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <h1 class="title">{{bookshelf}}</h1>
  <h2 class="subheading">Bookshelf</h2>
  
    <strong class="heading-info">Number of Books in Bookshelf:</strong> <p>{{ total }}</p>

  {% if user.is_authenticated %}
  <p id="add-title"></p>
  <form class="add-form" action="/bookshelves/{{bookshelfId}}" method="post">
      {% csrf_token %}
      {{ form }}
      <input type="submit" id="add-book-btn" value="Add Book">
  </form>
  <p class="form-help">Or search for a book to add <a href="/bookshelves/{{bookshelfId}}/search">here</a></p>
  {% endif %} 


    <h1 class="secondary-heading">Book List</h1>
    {% if books %}
    <ul>
      {% for book in books %}
        <li class="bookshelf" id="book-{{ book.id }}">
          <a href="https://www.gutenberg.org/ebooks/{{ book.id }}">{{ book.title }}</a>
        </li>
      {% endfor %}
    </ul>
    {% else %}
      <p>There are no books in the bookshelf.</p>
    {% endif %} 
    {% load static %}
  <script src="{% static 'booklist.js' %}"></script>
  <link rel="stylesheet" href="{% static 'style.css' %}"></script>
  {% endblock %}