{% load cat_extra %}
{% load tag_extra %}
{% load utils_extra %}
{% load static %}
{% load locations_extra %}

{% if noarticle == 0 %}
<article id="filters">
{% endif %}
    <div>
    <div class="categories">
        {% show_legend category=category filter=filter %}
    </div>

    <div class="filtres">
    <details {% if filter.is_active %}class="active"{% endif %}>
        {{  filter.form.non_field_errors }}
    <summary role="button" class="outline secondary">
        {% if filter.is_active %}
            <strong>Filtres&nbsp;: </strong>
            {% for t in filter.get_tags %}
                {{ t | tag_button:"true" }}
            {% endfor %}
            {% for t in filter.get_exclude_tags %}
                {{ t | tag_button_strike:"true" }}
            {% endfor %}
            {% for s in filter.get_status_names %}
                {{ s }}
            {% endfor %}
            {{ filter.get_recurrence_filtering }}
            {{ filter.get_position_radius }}
        {% else %}
        <strong>Filtrer</strong>
        {% endif %}

        {% if filter.is_resetable %}
        <a class="contrast simple-button" href="{{ filter.get_url_without_filters }}" data-tooltip="Supprimer les filtres">{% picto_from_name "x-circle" %}</a>
        {% endif %}
        
    </summary>
    <form method="get" class="form django-form main-filter">
        <div class="grid two-columns-equal">
        <article>
            {% for f in filter.form.visible_fields %}
            {% if f.id_for_label and f.id_for_label in "id_position,id_radius" %}
                <div>
                    {{ f.errors }}
                    {{ f.label_tag }} {{ f }}
                    <span class="helptext">{{ f.help_text }}</span>
                </div>
            {% endif %}
            {% endfor %}
        </article>
        <article>
            {% for f in filter.form.visible_fields %}
            {% if not f.id_for_label or not f.id_for_label in "id_position,id_radius" %}
                <p>
                    {{ f.errors }}
                    {{ f.label_tag }} {{ f }}
                    <span class="helptext">{{ f.help_text }}</span>
                </p>
            {% endif %}
            {% endfor %}
        </article>
        </div>
        <button type="submit">Appliquer le filtre</button>
    </form>
    </details>
    <div class="suggestions">
        Suggestion&nbsp;:
            {% show_suggested_positions filter=filter %}
            {% show_suggested_tags filter=filter %}
    </div>
    </div>
<div class="clear"></div>
</div>
<script src="{% static 'choicejs/choices.min.js' %}"></script>
<script>
    show_firstgroup = {
                choice(classes, choice) {
                    const i = Choices.defaults.templates.choice.call(this, classes, choice);
                    if (this.first_group !== null && choice.groupId == this.first_group)
                        i.classList.add("visible");
                    return i;
                },
                choiceGroup(classes, group) {
                    const g = Choices.defaults.templates.choiceGroup.call(this, classes, group);
                    if (this.first_group === undefined && group.value == "Suggestions")
                        this.first_group = group.id;
                    if (this.first_group !== null && group.id == this.first_group)
                       g.classList.add("visible");
                    return g;
                }
    };

    const position = document.querySelector('#id_position');
    const choices_position = new Choices(position,
        { 
            shouldSort: false, 

        }
    );
    const tags = document.querySelector('#id_tags');
    const choices_tags = new Choices(tags,
        {
            placeholderValue: 'Chercher les étiquettes à inclure',
            allowHTML: true,
            delimiter: ',',
            removeItemButton: true,
            shouldSort: false,
            callbackOnCreateTemplates: () => (show_firstgroup)
        }
    );
    const exclude_tags = document.querySelector('#id_exclude_tags');
    const choices_exclude_tags = new Choices(exclude_tags,
        {
            placeholderValue: 'Chercher les étiquettes à exclure',
            allowHTML: true,
            delimiter: ',',
            removeItemButton: true,
            shouldSort: false,
            callbackOnCreateTemplates: () => (show_firstgroup)
          }
    );

</script>

{% if noarticle == 0 %}
</article>
{% endif %}
