{#
/**
 * @file
 * CivicTheme Group Filter component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - title: [string] Filter title.
 * - form_attributes: [string] Form attributes (if empty, the form will not be printed).
 * - form_hidden_fields: [string] Form hidden fields.
 * - filters: [array] Filter objects:
 *   Each item contains:
 *   - title: [string] Filter title.
 *   - content: [string] Filter content.
 * - submit_text: [string] Text on the submit button.
 * - group_id: [string] Unique ID for filter group.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 *
 * Slots:
 * - content_top: Top content area content.
 * - content_bottom: Bottom content area content.
 *
 * Blocks:
 * - content_top_block
 * - filters_block
 * - content_bottom_block
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}

{% if filters is not empty %}
  {% set title = title|default('Filter results by:') %}

  <div
    class="ct-group-filter {{ modifier_class -}}"
    data-component-name="ct-group-filter"
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  >
    <div class="container" data-group-filter-element>
      <div class="row">
        <div class="col-xxs-12">

          {% if content_top is not empty %}
            {% block content_top_block %}
              <div class="ct-group-filter__content-top">
                {{- content_top|raw -}}
              </div>
            {% endblock %}
          {% endif %}

          {% block filters_block %}
            {% set group = 'ct-group-filter--group-' ~ group_id|default(random(1000, 9999)) %}
            {% set filters_items = [] %}
            {% for filter in filters %}
              {% set filters_item %}
                {% include 'civictheme:popover' with {
                  theme: theme,
                  content: filter.content,
                  trigger: {
                    text: filter.title,
                  },
                  group: group,
                } only %}
              {% endset %}
              {% set filters_items = filters_items|merge([filters_item]) %}
            {% endfor %}

            {% if form_attributes is not empty %}
              <form {{ form_attributes|raw }}>
            {% endif %}

            <div class="row row--no-wrap ct-group-filter__row">
              <div class="col col--no-grow">
                <div class="ct-flex-row-align-middle">
                  {% if title %}
                    <div class="ct-group-filter__title">{{ title }}</div>
                  {% endif %}
                </div>
              </div>

              <div class="col">
                <div class="ct-flex-row-align-middle">
                  {% include 'civictheme:item-list' with {
                    items: filters_items,
                    size: 'large',
                    modifier_class: 'ct-group-filter__filters',
                    attributes: 'data-group-filter-filters',
                  } only %}
                </div>
              </div>

              <div class="col col--no-grow">
                <div class="ct-flex-row-align-middle">
                  {% include 'civictheme:button' with {
                    theme: theme,
                    kind: 'button',
                    type: 'secondary',
                    size: 'small',
                    text: submit_text|default('Apply filters'),
                    icon: 'approve',
                    icon_placement: 'before',
                    attributes: 'type=submit',
                    modifier_class: 'ct-group-filter__submit',
                  } only %}
                </div>
              </div>
            </div>

            {% if form_hidden_fields|trim is not empty %}
              {{ form_hidden_fields|raw }}
            {% endif %}

            {% if form_attributes is not empty %}
              </form>
            {% endif %}
          {% endblock %}

          {% block content_bottom_block %}
            {% if content_bottom is not empty %}
              <div class="ct-group-filter__content-bottom">
                {{- content_bottom|raw -}}
              </div>
            {% endif %}
          {% endblock %}
        </div>
      </div>
    </div>
  </div>
{% endif %}
