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
  </div>
  <!-- end breadcrumb -->

  <div class="md:flex md:border-b md:border-slate 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 class="flex space-x-3 md:space-x-6 mb-6 md:mb-0">
        <span>View by:</span>
        <span>
          <label>
            <input type="checkbox" id="view" name="view" value="all" class="border rounded-sm bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer" />
            <span class="peer-checked:text-orange">All</span>
          </label>
        </span>
        <span>
          <label>
            <input type="checkbox" id="view" name="view" value="categorized" class="border rounded-sm bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer" />
            <span class="peer-checked:text-orange">Categorized</span>
          </label>
        </span>
        <span>
          <label>
            <input type="checkbox" id="view" name="view" value="condensed" class="border rounded-sm bg-charcoal hover:bg-orange cursor-pointer checked:bg-orange mr-1 peer" />
            <span class="peer-checked:text-orange">Condensed</span>
          </label>
        </span>
      </div>
    </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:bg-white focus:text-charcoal text-orange px-3 py-2 rounded-md" type="text" value="" placeholder="Search Library" />
      </div>
      <div>
        <select 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">
          <option>Filter by category</option>
          {% for c in categories %}
          <option value="{{c.name}}">{{ c.name }}</option>
          {% endfor %}
        </select>
        <select class="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"><option>Filter by date</option></select>
      </div>
    </div>
  </div>

  {% include "libraries/_alphabet_filter.html" %}

  <!-- Libraries list -->
  <div class="rounded bg-charcoal p-3 md:p-11 mb-5 mx-3">
    {% for library in object_list %}

    <div class="md:flex border-b border-slate last:border-0 py-4 my-6">
      <div class="md:w-3/4 mb-4 space-y-4 md:space-y-2">
        <h3 class="text-2xl mb-3 capitalize"><a href="{% url 'library-detail' slug=library.slug %}">{{ library.name }}</a></h3>
        <p class="mb-3">{{ library.description }}</p>
        <div class="md:flex text-sm">
          <div class="md:mr-11">First Release:  X.YY.Z</div>
          <div class="mt-4 md:mt-0">Categories:  {% for c in library.categories.all %}<a href="{% url 'libraries-by-category' category=c.slug %}" class="text-orange">{{ c.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</div>
        </div>
        <div class="text-sm">C++ Standard Minimum Level:  {{ library.cpp_standard_minimum }}</div>
      </div>
      <div class="md:w-1/4 mb-4 text-sm">
        <div class="my-5 flex">
          <div class="md:mr-5 w-1/3">Author(s):</div>
          <div class="space-y-3">
            <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> Glen Fernandes</div>
            <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> Glen Fernandes</div>
            <div><img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /> Glen Fernandes</div>
          </div>
        </div>
      </div>
    </div>

    {% 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 %}