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">
    {% if version_slug %}
      <a class="text-orange" href="{% url 'libraries-by-version' version_slug %}">Libraries ({{ version_name }})</a>
    {% else %}
      <a class="text-orange" href="{% url 'libraries' %}">Libraries</a>
    {% endif %} > Categorized
      {% if category %} > 
        <a class="text-orange" href="
          {% if version_slug %}
            {% url 'libraries-by-version-by-category' version_slug=version_slug category=category.slug%}
          {% else %}
            {% url 'libraries-by-category' category=category.slug %}
          {% endif %}">{{ category.name }}</a>
      {% endif %}
  </div>
  <!-- end breadcrumb -->
  <div class="md:flex py-0 md:py-6 mb-3 px-3 md:px-0" x-data="{'showSearch': false}" x-on:keydown.escape="showSearch=false">
    <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 @click="showSearch = true; $nextTick(() => { setTimeout(() => { document.getElementById('librarySearch').focus(); }, 300);});"
               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="{{ form_action }}" method="post">
        {% csrf_token %}
        <div>
          <label for="id_categories" hidden="true">Categories:</label>
          <select onchange="this.form.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-2"
                  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>
        </div>
      </form>
    </div>
    <!-- command palatte for search -->
    {% include "libraries/includes/search_command_palatte.html" %}
  </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 %}