{% 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">All Bookshelves</h1>
  
    <strong class="heading-info">Number of Bookshelves:</strong> <p>{{ total }}</p>

    {% if bookshelves %}
    <ul>
      {% for bookshelf in bookshelves %}
        <li class="bookshelf" id="bookshelf-{{ bookshelf.id }}">
          <a href="/bookshelves/{{ bookshelf.id }}">{{ bookshelf.bookshelf }}</a>
        </li>
      {% endfor %}
    </ul>
    {% else %}
      <p>No bookshelves found.</p>
    {% endif %} 
    {% load static %}
  <link rel="stylesheet" href="{% static 'style.css' %}"></script>
  {% endblock %}