<h3>NSW Design System</h3>

<p>
    Enable <code>js</code> flag on <code>filter</code> to activate "Apply"
    button only when filters selected. This parameter is also required when you
    pass <code>collapsible</code> into <code>facet_section</code>. Collapsible
    facets are initially collapsed and have an icon next to title, when at
    least one facet from the section is active.
</p>

<p>
    Note, filters component needs a form to apply filters. By default GET form
    for the current page is added around the filters. To use existing form, set
    <code>form_id</code> parameter of the <code>filters</code> component to its
    ID. You'll need to do the same with facets if using external form. As for
    normal input fields, they require <code>attrs={"form": form_id}</code> parameter.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {% set id = ui.util.id() -%}
        <form id="{{ id }}"></form>

        {%- call ui.util.call(ui.filters, form_id=id, js=true, instant=true) -%}
            {%- call ui.util.call(ui.facet_section, title="Cool facet", collapsible=true) -%}
                {{ ui.facet("First value", key="cool", form_id=id) }}
                {{ ui.facet("Second value", key="cool", form_id=id) }}
            {%- endcall %}

            {%- call ui.util.call(ui.facet_section, title="Non-collapsible") -%}
                {{ ui.facet("First value", key="not-cool", form_id=id) }}
                {{ ui.facet("Second value", key="not-cool", form_id=id) }}
            {%- endcall %}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}

<p>
    When <code>js</code> is enabled on <code>filters</code>, you can specify
    collapse behavior on small screens for the whole filter panel. Set <code>collapse_direction</code> parameter
    to <code>down</code> or <code>right</code>, and filters panel will be
    collapsed initially, expanding according to the specified direction upon
    click. Note, this will apply only for mobile devices. On desktop filters
    will remain visible.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {% call ui.util.call(ui.filters, collapse_direction="down", js=true) -%}
            {%- call ui.util.call(ui.facet_section, title="Cool facet") -%}
                {{ ui.facet("First value", key="cool", form_id=id) }}
                {{ ui.facet("Second value", key="cool", form_id=id) }}
            {%- endcall %}
        {%- endcall %}

        {%- call ui.util.call(ui.filters, collapse_direction="right", js=true) -%}
            {%- call ui.util.call(ui.facet_section, title="Cool facet") -%}
                {{ ui.facet("First value", key="cool", form_id=id) }}
                {{ ui.facet("Second value", key="cool", form_id=id) }}
            {%- endcall %}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}


<p>
    You can use arbitrary inputs inside facet section. Put them directly into <code>facet_section</code>.
    If facet section contains a single field leave the <code>label</code> empty
    because facet section already has title that identifies the field.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {% call ui.util.call(ui.filters, collapse_direction="down", js=true) -%}
            {%- call ui.util.call(ui.facet_section, title="Cool facet") -%}
                {{ ui.select(name='select-filter',
                options=[{"value": ""}, {'value': "A"},{'value': "B"}]) }}
            {%- endcall %}
        {%- endcall %}

        {%- call ui.util.call(ui.filters, collapse_direction="right", js=true) -%}
            {%- call ui.util.call(ui.facet_section, title="Multi-input facet", collapsible=true) -%}
                {{ ui.input(name='select-input', label="Input") }}
                {{ ui.nds_date_input_group(name='date-input', label="Date") }}
            {%- endcall %}
        {%- endcall %}
    {%- endraw %}
{%- endcall %}