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

{% macro _render_column_selector(item_id, item, filter_choices, is_static_item=false, is_extra_item=false, filter_only=false) %}
    {% set filters = filters['items'] if is_static_item else filters.get('extra', {}) if is_extra_item else filters['fields'] %}
    {% set filter_title = item.filter_title|default(item.title) if is_static_item or is_extra_item else item.title %}
    <div class="label-group list-column">
        <div class="i-label title-wrapper" {% if filter_only %}data-only-filter{% endif %}
             data-id="{{ item.personal_data_type.name if item.personal_data_type else item_id }}">
            <div class="title">{{ filter_title }}</div>
            {% if not filter_only %}
                <div class="actions">
                    <span class="visibility icon-eye"></span>
                </div>
            {% endif %}
        </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_regform_item_col_selector(section) %}
    <h3>{{ section.title }}</h3>
    <div class="flexrow f-wrap">
        {% for field in section.available_fields %}
            {% set filter_choices = field.field_impl.filter_choices %}
            {{ _render_column_selector(field.id, field, filter_choices) }}
        {% endfor %}
    </div>
{% endmacro %}

<div class="action-box">
    <div class="section">
        <div class="icon icon-wrench"></div>
        <div class="text">
            <div class="label">{% trans %}Customize registration list{% endtrans %}</div>
            <div>
                {% set filter_icon = '<i class="icon-filter"></i>' | safe %}
                {%- trans -%}
                    Change the configuration of the registration 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 registration info{% endtrans %}</h3>
        <div class="flexrow f-wrap">
            {% for item_id, item in static_items.items() %}
                {% set filter_choices = item.get('filter_choices') %}
                {% set filter_only = item.get('filter_only', false) %}
                {{ _render_column_selector(item_id, item, filter_choices, is_static_item=true, filter_only=filter_only) }}
            {% endfor %}
        </div>

        {% if custom_items %}
            <h3>{% trans %}Additional data{% endtrans %}</h3>
            <div class="flexrow f-wrap">
                {% for item_id, item in custom_items.items() %}
                    {{ _render_column_selector(item_id, item, item.filter_choices, is_extra_item=true, filter_only=item.filter_only) }}
                {% endfor %}
            </div>
        {% endif %}

        {% for section in regform.sections if section.is_visible and section.available_fields %}
            {{ _render_regform_item_col_selector(section) }}
        {% endfor %}

        {% set disabled_sections = regform.disabled_sections|selectattr('available_fields')|list %}
        {% if disabled_sections %}
            <h1 class="disabled-caption">
                {# i18n: Refers to sections in registration forms #}
                {%- trans %}Disabled sections{% endtrans -%}
                <a class="button icon-next js-toggle-disabled"
                   title="{% trans %}Click to show/hide disabled sections{% endtrans %}"></a>
            </h1>
            <div class="disabled-sections">
                {% for section in disabled_sections %}
                    {{ _render_regform_item_col_selector(section) }}
                {% 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>
    (function() {
        'use strict';

        setupListFilter();

        $('.js-toggle-disabled').on('click', function() {
            var $this = $(this);
            $('.disabled-sections').slideToggle({
                start: function() {
                    $this.toggleClass('icon-next icon-expand');
                }
            });
        });
    })();
</script>
