website-v2/templates/libraries/list.html

{% extends "base.html" %}

{% load static %}

{% block content %}
  <!-- Breadcrumb used on filtered views -->
  <div class="p-3 md:p-0">
    <a class="text-orange" href="{% url "libraries" %}">Libraries</a> > Categorized{% if category %} > <a class="text-orange" href="{% url "libraries-by-category" category.slug %}">{{ category.name }}</a>{% endif %}
  </div>
  <!-- end breadcrumb -->

  <div class="md:flex py-0 md:py-6 mb-3 px-3 md:px-0">
    <div class="md:w-1/2 px-3 md:px-0">
      <h2 class="text-4xl my-5">Libraries</h2>
    </div>
    <div class="w-full md:w-1/2 md:text-right space-y-3 mt-3 md:mt-0">
      <div class="relative md:mb-6">
        <span class="absolute inset-y-0 right-3 flex items-center pl-2">
          <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </button>
        </span>
        <input type="search" name="q" class="w-full md:w-1/3 text-sm text-white bg-charcoal focus:text-charcoal text-orange px-3 py-2 rounded-md" type="text" value="" placeholder="Search Library" />
      </div>

      <!-- Form to select a category -->
      <form action="/libraries/" method="post" x-ref="categoryform">
        {% csrf_token %}
        <div>
          <label for="id_categories" hidden="true">Categories:</label>
          <select x-on:input="$refs.categoryform.submit()" name="categories"
                  class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-3 mr-3"
                  id="id_categories"
          >
            <option>Filter by category</option>
            {% for c in categories %}
              <option value="{{ c.pk }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
            {% endfor %}
          </select>
          <button class="bg-orange rounded p-2" @click="$refs.categoryform.submit()">Go</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Libraries list -->
  <div class="mb-5 space-y-3">
    {% for library in object_list %}
      {% include "libraries/_library_list_item.html" %}
    {% endfor %}
  </div>
  <!-- end libraries list -->

  <!-- Pagination -->
  <div class="text-center space-x-3">
    {% if page_obj.has_previous %}
    <a href="?page=1" class="text-orange"><small> &lt;&lt; First</small></a>
    <a href="?page={{ page_obj.previous_page_number }}" class="text-orange"><small> &lt; Previous</small> </a>
    {% endif %}
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}" class="text-orange"><small>Next <small> &gt; </small></a>
    <a href="?page={{ page_obj.paginator.num_pages }}" class="text-orange">Last <small> &gt;&gt;</small></a>
    {% endif %}
  </div>
  <!-- end pagination -->

{% endblock %}