{% extends 'base.html' %}
{% load static humanize widget_tweaks %}
{% load render_bundle from webpack_loader %}

{% block js %}{% render_bundle 'booksSearch' 'js' %}{% endblock %}

{% block page-subtitle %}Library Holdings · {% endblock %}

{% block header %}
{% include 'snippets/header.html' with title=page_title style="search" %}
{% endblock %}

{% block main-style %}white{% endblock %}

{% block content %}
{% include 'snippets/breadcrumbs.html' %}
<section class="books search-form">
    <form id="books-form">
        {% render_field form.query %}
        <label for="{{ form.query.id_for_label }}"></label>
        {% include 'common/form_errors.html' %}
        <fieldset class="group">
            <legend>Filter by:</legend>
            <div class="inner">
                <fieldset class="range facet {{ form.circulation_dates.css_classes }}" id="id_{{ form.circulation_dates.name }}">
                    <legend>{{ form.circulation_dates.label }}</legend>
                    {{ form.circulation_dates }}
                </fieldset>
            {% comment %}
            <div class="inner">
                <div class="creators tab" role="tab" aria-setsize="2" aria-posinset="1" aria-selected="false" aria-controls="creators-panel" aria-disabled>Creators*</div>
                <div class="publishers tab" role="tab" aria-setsize="2" aria-posinset="2" aria-selected="false" aria-controls="publishers-panel" aria-disabled>Publishers*</div>
                <div class="tabpanel" id="creators-panel" role="tabpanel"></div>
                <div class="tabpanel" id="publishers-panel" role="tabpanel"></div>
            </div>
            {% endcomment %}
            <input type="submit" value="submit"/>
        </fieldset>
        {% include 'common/active_filters.html' %}
        <output class="total-results" id="total">{{ works.count|intcomma }} total result{{ works.count|pluralize }}</output>
    </form>
</section>
<div class="upper-labels"> {# only shown on mobile & tablet before the user scrolls down #}
    <label>SORTED BY</label>
    <label>DISPLAYING</label>
</div>
<section class="books sort-pages">
    <div class="inner">
        <label class="sort">
            <span>SORTED BY</span>
            {% render_field form.sort form="books-form" %}
            <img class="dropdown icon" src="{% static 'img/icons/chevron_down.png' %}" alt="">
        </label>
        <button type="submit" form="books-form">Go</button>
        {% include 'snippets/pagination.html' with form_id="books-form" %}
    </div>
    <div class="outer">
        {% include 'snippets/page-controls.html' %}
    </div>
</section>
<output form="books-form" class="results" aria-live="polite" aria-labelledby="total">
    {% include 'books/snippets/work_results.html' %}
</output>
{% endblock %}