{% from 'forms/_form.html' import form_header, form_footer, form_rows %}
{% from '_switch.html' import switch %}

{% macro _render_column_selector(item_id, item, filter_choices, is_static_item=false) %}
    {% set filters = filters['items'] if is_static_item else filters['fields'] %}
    <div class="label-group list-column">
        <div class="i-label title-wrapper" data-id="{{ item_id }}">
            <div class="title">{{ item.title }}</div>
            <div class="actions">
                <span class="visibility icon-eye"></span>
            </div>
        </div>
        {% if filter_choices %}
            <div class="i-label filter">
                <a class="icon-filter" data-toggle="dropdown"></a>
                <ul class="i-dropdown" style="display: none">
                    {% for value, caption in filter_choices.items() %}
                        <li>
                            <input type="checkbox" name="field_{{ item_id }}" value="{{ value }}"
                                   id="field_{{ item_id }}_option_{{ value }}"
                                   {% if value in filters.get(item_id|string, []) %}
                                       checked
                                   {% endif %}>
                            <label for="field_{{ item_id }}_option_{{ value }}">
                                {{ caption }}
                            </label>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% macro _render_boolean_filter(id=none, name=none, label=none) %}
    <div id="form-group-tracks_required" class="form-group">
        {% if label %}
            <div class="form-label">
                <label for="{{ id }}">{{ label }}</label>
            </div>
        {% endif %}
        <div class="form-field">
            {{ switch(id=id, name=name, checked=filters['extra'][id]|bool) }}
        </div>
    </div>
{% endmacro %}

<div class="action-box">
    <div class="section">
        <div class="icon icon-wrench"></div>
        <div class="text">
            <div class="label">
                {%- trans %}Customize abstract list{% endtrans -%}
            </div>
            <div>
                {% set filter_icon = '<i class="icon-filter"></i>' | safe %}
                {%- trans -%}
                    Change the configuration of the abstract list by enabling/disabling the columns listed below, or by applying filtering ({{ filter_icon }}) options.
                {%- endtrans -%}
            </div>
        </div>
        <div class="toolbar">
            <button class="i-button icon-checkbox-checked arrow left icon-only"
                    aria-hidden="true" data-toggle="dropdown"></button>
            <ul class="i-dropdown">
                <li><a href="#" id="list-filter-select-all">{% trans 'Selection' %}All{% endtrans %}</a></li>
                <li><a href="#" id="list-filter-select-none">{% trans 'Selection' %}None{% endtrans %}</a></li>
            </ul>
            <button class="i-button js-reset-btn icon-close warning" type="button">
                {%- trans %}Clear filters{% endtrans -%}
            </button>
        </div>
    </div>
</div>
<div class="success-message-box js-clear-filters-message" style="display: none">
    <div class="message-text">
        {%- trans -%}All filters have been cleared.{%- endtrans -%}
    </div>
</div>
<form class="list-filter" method="POST">
    <div class="list-filter-content">
        <input id="visible-items" type="hidden" name="visible_items"
               value="{{ visible_items | tojson | forceescape }}">
        <h3>{% trans %}General abstract info{% endtrans %}</h3>
        <div class="flexrow f-wrap">
            {% for item_id, item in static_items.items() %}
                {% set filter_choices = item.get('filter_choices') %}
                {{ _render_column_selector(item_id, item, filter_choices, is_static_item=true) }}
            {% endfor %}
        </div>

        {% if contrib_fields %}
            <h3>{% trans %}Abstract fields{% endtrans %}</h3>
            <div class="flexrow f-wrap">
                {% for field in contrib_fields %}
                    {{ _render_column_selector(field.id, field, field.filter_choices) }}
                {% endfor %}
            </div>
        {% endif %}

        {% if extra_filters %}
            <h3>{% trans %}Extra filters{% endtrans %}</h3>
            <div class="i-form horizontal">
                {% for item_id, item in extra_filters.items() %}
                    {% set name = 'field_{}'.format(item_id) %}
                    {% if item.type == 'bool' %}
                        {{ _render_boolean_filter(id=item_id, name=name, label=item.title) }}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
    </div>
    <div class="bottom-buttons">
        <input class="i-button big highlight" type="submit" data-disabled-until-change
               value="{% trans 'Filters' %}Apply{% endtrans %}">
        <button class="i-button big" type="button" data-button-back>{% trans %}Cancel{% endtrans %}</button>
    </div>
</form>
<script>
    setupListFilter();
</script>
