{% 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 %}
    {% if category %} > Categorized >
      <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="py-0 px-3 mb-3 md:flex md:py-6 md:px-0" x-data="{'showSearch': false}" x-on:keydown.escape="showSearch=false">
    <div class="px-3 md:px-0 md:w-1/2">
      <h2 class="my-5 text-4xl">Libraries</h2>
    </div>
    <div class="mt-3 space-y-3 w-full md:mt-0 md:w-1/2 md:text-right">
      <div class="relative md:mb-6">
        <span class="flex absolute inset-y-0 right-3 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('q').focus(); }, 300);});"
               type="search" name="q" class="py-2 px-3 w-full text-sm text-white rounded-md md:w-1/3 bg-charcoal text-orange focus:text-charcoal" 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="block py-2 pr-11 pl-5 mb-3 w-full text-sm uppercase bg-black rounded-md border cursor-pointer sm:inline-block md:mb-0 md:w-auto text-orange border-slate"
                  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="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 -->
{% endblock %}