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

{% block extra_head %}
    <meta property="og:title" content="Readux - Search" />
    <meta name="twitter:title" content="Readux - Site Search" />
    <meta
        property="og:image"
        content="https://{{ request.META.HTTP_HOST }}/apps/static/images/readux_logo.jpg"
    />
    <meta
        property="og:description"
        content="Search Readux volumes"
    />
    <meta
        name="twitter:description"
        content="Search Readux volumes"
    />
{% endblock %}
{% block extra_javascript %}
    <script src="{% static 'js/search.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/nouislider/dist/nouislider.js"></script>
{% endblock %}
{% block extra_css %}
    <link href="https://cdn.jsdelivr.net/npm/nouislider/dist/nouislider.css" rel="stylesheet">
    <noscript>
        <style type="text/css">
            div#search-grid input#toggle-date,
            div#search-grid input#toggle-date + label,
            div#search-grid button#reset-filters,
            div#search-grid input#authors-filter {
                display: none;
            }
        </style>
    </noscript>
{% endblock %}
{% block body_class %}template-homepage{% endblock %}

{% block content %}
    <h1 class="uk-heading-medium uk-text-center">Search</h1>
    <p class="uk-text-lead uk-text-center">Search and filter all volumes.</p>


    <form
        id="search-form"
        action="{% url 'search' %}"
        method="get"
        accept-charset="utf-8"
    >
        <div class="uk-form uk-width-1-1">
            <fieldset class="uk-margin uk-width-1-1">
                <div class="uk-inline uk-width-1-1">
                    <span class="uk-form-icon" uk-icon="icon: search" aria-label="search"></span>
                    {{ form.q }}
                </div>
                <span class="uk-text-small">
                    Search for individual whole keywords. Multiple words will be searched as
                    'or' (e.g. Rome London = Rome or London).
                </span>
            </fieldset>
            <fieldset class="uk-margin uk-width-1-1">
                <div class="uk-form-label">{{ form.sort.label }}</div>
                {{ form.sort }}
            </fieldset>
            <fieldset class="uk-margin uk-flex uk-flex-center uk-width-1-1">
                <button class="uk-button uk-button-secondary" type="submit">
                    Search
                </button>
            </fieldset>
        </div>
        <div uk-grid class="uk-grid" id="search-grid">
            <div
                class="uk-form uk-form-stacked uk-width-1-3"
                id="search-filters"
            >
                <h4 class="uk-flex uk-flex-center">Filters</h4>
                <fieldset class="uk-margin">
                    <div class="uk-width-1-1">
                        <div class="uk-form-label">{{ form.author.label }}</div>
                        <input type="text" id="authors-filter" class="uk-input" placeholder="Start typing an author's name" />
                        {{ form.author }}
                    </div>
                </fieldset>
                <fieldset class="uk-margin">
                    <div class="uk-width-1-1">
                        <div class="uk-form-label">{{ form.language.label }}</div>
                        {{ form.language }}
                    </div>
                </fieldset>
                <fieldset class="uk-margin uk-width-1-1">
                    <div class="uk-form-label">{{ form.collection.label }}</div>
                    {{ form.collection }}
                    <span class="uk-text-small">
                        Hold down “Control”, or “Command” on a Mac, to select more than one, or to deselect a selected item. Selecting multiple options will include all results matching any of the options.
                    </span>
                </fieldset>
                <fieldset class="uk-margin uk-width-1-1">
                    <span class="uk-form-label uk-margin-remove-bottom">Date published</span>
                    <input type="checkbox" name="date-filter" id="toggle-date" />
                    <label for="toggle-date"><span>Filter by date published</span></label>
                    <div id="date-range-slider"></div>
                    <noscript>
                        <div class="uk-form-label">{{ form.start_date.label }}</div>
                        {{ form.start_date }}
                        <div class="uk-form-label">{{ form.end_date.label }}</div>
                        {{ form.end_date }}
                    </noscript>
                </fieldset>
                <fieldset class="uk-margin uk-width-1-1 uk-flex uk-flex-between">
                    <button id="reset-filters" class="uk-button uk-button-danger" type="button">
                        Reset filters
                    </button>
                    <button class="uk-button uk-button-secondary" type="submit">
                        Apply
                    </button>
                </fieldset>
            </div>
            <div class="uk-width-2-3">
                <h4 class="uk-flex uk-flex-center">
                    {{ volumes.count }} result{{ volumes.count|pluralize }}
                </h4>
                <div class="uk-flex uk-flex-center">
                    {% include "snippets/pagination.html" %}
                </div>
                <ol class="uk-flex uk-flex-column uk-list-divider" id="search-results">
                    {% for volume in volumes %}
                        {% include "snippets/volume_result.html" %}
                    {% endfor %}
                </ol>
                <div class="uk-flex uk-flex-center">
                    {% include "snippets/pagination.html" %}
                </div>
            </div>
        </div>
    </form>

{% endblock content %}