{% 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">{{bookName}}</h1>
  <h2 class="subheading">Bookshelves this book belongs to:</h2>
  
    <strong class="heading-info">Number of bookshelves it belongs to:</strong> <p>{{ total }}</p>

    {% if bookshelves %}
    <ul>
      {% for bookshelf in bookshelves %}
        <li class="bookshelf">
          <a href="/bookshelves/{{ bookshelf.id }}">{{ bookshelf.bookshelf }}</a>
        </li>
      {% endfor %}
    </ul>
    {% else %}
      <p>This book is not in any bookshelves.</p>
    {% endif %} 
    {% load static %}
  <script src="{% static 'booklist.js' %}"></script>
  <link rel="stylesheet" href="{% static 'style.css' %}"></script>
  {% endblock %}