website-v2/templates/libraries/list.html

{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Boost Libraries" %}{% endblock %}
{% block description %}{% trans "Explore our comprehensive list of Boost C++ Libraries and discover tools for multithreading, image processing, testing, and more." %}{% endblock %}

{% block content %}
<main class="content">
  <div class="py-0 px-0 mt-0 mb-0 w-full md:mb-2 flex flex-row flex-nowrap items-center md:block">
    <div class="flex-auto mb-2 w-full md:block md:w-auto md:mb-0">
      <div>
          <span class="text-xl md:text-3xl lg:text-4xl">Libraries</span>
      </div>
    </div>
    <div class="flex-shrink md:hidden">
      <form action="." method="get">
        <div>
          <select onchange="this.form.submit()"
              name="version"
              class="dropdown"
              id="id_version">
            {% for v in versions %}
            <option value="{{ v.slug }}" {% if version == v %}selected="selected"{% endif %}>{{ v.display_name }}</option>
            {% endfor %}
          </select>
        </div>
      </form>
    </div>
  </div>

  <div class="pt-2 px-0 mb-2 text-right md:mb-6">

    <form action="." method="get">
      <div class="flex relative space-x-3 justify-between md:justify-start">
        {# Search #}
        {% include "libraries/includes/search_input.html" %}

        {# Select a category #}
        <div>
          {# todo: if someone selects a category and hits back, it retains their choice here. #}
          <select onchange="this.form.submit()"
            name="category"
            class="block py-2 pr-11 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black dark:border-slate"
            id="id_category"
          >
            <option value="">Filter by category</option>
            {% for c in categories %}
              <option value="{{ c.slug }}" {% if category == c %}selected="selected"{% endif %}>{{ c.name }}</option>
            {% endfor %}
          </select>
        </div>

        {# Display options #}
        <div class="flex space-x-3">
          <div><a title="Name View" href="{% url 'libraries-mini' %}"><i class="link rounded border border-gray-300 cursor-pointer fas fa-list p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
          <div><a title="Grid View" href="{% url 'libraries' %}"><i class="link rounded border border-gray-300 cursor-pointer fas fa-th-large p-[10px] bg-gray-100 dark:bg-slate"></i></a></div>
          <div><a title="Category View" href="{% url 'libraries-by-category' %}"><i class="link rounded border border-gray-300 cursor-pointer fas fa-cat p-[10px] hover:bg-gray-100 dark:hover:bg-slate"></i></a></div>
        </div>


        {# Select a version #}
        <select onchange="this.form.submit()"
                name="version"
                class="dropdown absolute right-0 hidden md:inline"
                id="id_version">
          {% for v in versions %}
          <option value="{{ v.slug }}" {% if version == v %}selected="selected"{% endif %}>{{ v.display_name }}</option>
          {% endfor %}
        </select>
      </div>
    </form>
  </div>

  {# alert for non-current Boost versions #}
  {% include "libraries/includes/version_alert.html" %}

  {# Libraries list #}
  <div class="grid grid-cols-1 gap-4 mb-5 md:grid-cols-2 lg:grid-cols-3">
    {# todo/?: is by_category still possible here? #}
    {% if by_category %}
      {% for result in library_list %}
        <h2>{{ result.category }}</h2>
        {% for library in result.libraries %}
          {% include "libraries/_library_list_item.html" %}
        {% endfor %}
      {% endfor %}
    {% else %}
      {% for library in library_list %}
        {% include "libraries/_library_list_item.html" %}
      {% endfor %}
    {% endif %}
  </div>
  {# end libraries list #}

  {% if page_obj.paginator %}
  {# pagination #}
  <div class="space-x-3 text-center">
    {% 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 #}
  {% endif %}

</main>
{% endblock %}