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

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

{% block page-subtitle %}Library Members · {% 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' %}
<div class="members search-form">
    <form id="members-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.membership_dates.css_classes }}" id="id_{{ form.membership_dates.name }}">
                    <legend>{{ form.membership_dates.label }}</legend>
                    {{ form.membership_dates }}
                </fieldset>
                {% render_field form.has_card class+="sr-only" tabindex=0 %}
                <label for="{{ form.has_card.id_for_label }}">
                    <span>Card <span class="count">{{ members.get_facets.facet_fields.has_card.true }}</span></span>
                    <img class="card icon" src="{% static 'img/icons/member_card.svg' %}" alt="">
                    <span id="{{ form.has_card.field.widget.attrs|dict_item:'aria-describedby' }}" role="tooltip" class="question"
                        aria-label="{{ form.has_card.help_text }}" tabindex=0 onclick="event.preventDefault()"/>
                </label>
                <div class="demographics tab" role="tab" aria-setsize="1" aria-posinset="1" aria-selected="false" aria-controls="demographics-panel" tabindex="0">Demographics</div>
                {# <div class="books tab" role="tab" aria-setsize="2" aria-posinset="2" aria-selected="false" aria-controls="books-panel" aria-disabled>Books*</div> #}
                <div class="tabpanel" id="demographics-panel" role="tabpanel">
                    <label>Demographics</label>
                    <div class="inner">
                        <div class="column">
                            <fieldset class="range facet {{ form.birth_year.css_classes }}" id="id_{{ form.birth_year.name }}">
                                <legend>{{ form.birth_year.label }}</legend>
                                {{ form.birth_year }}
                            </fieldset>
                            {% render_field form.gender %}
                            <a class="info-link" href="/about/faq#gender"
                                title="Why do we identify gender?" tabindex="0"
                                id="{{ form.gender.field.widget.attrs|dict_item:'aria-describedby' }}"></a>
                        </div>
                        <div class="column">
                            <div class="expander" role="button" aria-controls="id_nationality" tabindex="0" aria-expanded="false">{{ form.nationality.label }}</div>
                            <a class="info-link" href="/about/faq#nationality"
                                title="Why do we identify nationality?" tabindex="0"
                                id="{{ form.nationality.field.widget.attrs|dict_item:'aria-describedby' }}"></a>
                            {% render_field form.nationality %}
                        </div>
                        <div class="column">
                            <div class="expander" role="button" aria-controls="id_arrondissement" tabindex="0" aria-expanded="false">{{ form.arrondissement.label }}</div>
                            {% render_field form.arrondissement %}
                        </div>
                    </div>
                </div>
                {# <div class="tabpanel" id="books-panel" role="tabpanel"></div> #}
            </div>
            <input type="submit" value="submit"/>
        </fieldset>
        {% include 'common/active_filters.html' %}
        <output class="total-results" id="total">{{ members.count|intcomma }} total result{{ members.count|pluralize }}</output>
    </form>
</div>
<div class="upper-labels"> {# only shown on mobile & tablet before the user scrolls down #}
    <label>SORTED BY</label>
    <label>DISPLAYING</label>
</div>
<section class="members sort-pages">
    <div class="inner">
        <label class="sort">
            <span>SORTED BY</span>
            {% render_field form.sort form="members-form" %}
            {# no dropdown icon; this sort isn't user-controllable #}
        </label>
        <button type="submit" form="members-form">Go</button>
        {% include 'snippets/pagination.html' with form_id="members-form" %}
    </div>
    <div class="outer">
        {% include 'snippets/page-controls.html' %}
    </div>
</section>
<output form="members-form" class="results" aria-live="polite" aria-labelledby="total">
    {% include 'people/snippets/member_results.html' %}
</output>

<noscript>
    {# demographics tab doesn't work without javascript; always show if disabled #}
    <style type="text/css">
    #demographics-panel {
        display: block;
        max-height: 13.5rem;
        border-color: #07ae79;
    }
    .tab::after {  {# suppress toggle arrow #}
        display: none;
    }
    </style>
</noscript>
{% endblock %}