{# LIBRARIES #}
{{ attach_library('ui_patterns/tourism_hub_cards_block.tourism_hub_cards_block_lib') }}

{% set show_header = show_header ?? true %}
{% set collapse_filters_open = collapse_filters_open|default(false) %}

{% if show_header %}
  {% include '@organisms/tm-th/partials/tourism-header.twig' %}
{% endif %}

{% set scroller = use_scroller and blocks|length > 3 %}

{% if wrapper_id %}
<div id="{{ wrapper_id }}">
{% endif %}

{% if filters %}
  {% set filter_links %}
    <div class="th-filters-container">
      <div class="th-filters">
        {% for filter in filters %}
          {{ filter }}
        {% endfor %}
      </div>
    </div>
  {% endset %}
{% endif %}

{% if filter_links and collapse_filters_name %}
  {% include '@molecules/tm-bs/collapse/collapse.twig' with {
    'aiid': 'things-filter',
    'label': collapse_filters_name,
    'toggle': 'chevron',
    'content': filter_links,
    'link_class': 'things-filter-collapse-trigger belinline',
    'content_classes': 'things-filter-collapse-content',
    'active': collapse_filters_open,
  } only %}
{% endif %}
{% if filter_links and not collapse_filters_name %}
  {{ filter_links }}
{% endif %}

{% if blocks %}
  <div class="th-cards{% if use_scroller %} mobile-scrolling{% endif %}{% if scroller %} th-scrollable{% endif %}">
    <div class="row cards-row{% if scroller %} th-scroll{% endif %}">
    {% for block in blocks %}
      <div class="col-sm-4 th-card">
        {% include '@molecules/tm-cards/tourism-card/tourism-card.twig' with {
          "title": block.title,
          "image": block.img,
          "card_link": block.block_link,
          "badge_type": block.badge_type ?? '',
          "badge_top": block.badge_top ?? '',
          "badge_bottom": block.badge_bottom ?? '',
          "scrolling_left": (scroller and loop.index == 1),
          "scrolling_right": (scroller and loop.index == 3),
        } only %}
      </div>
    {% endfor %}
    {% if use_scroller and more_link_text and more_link_url %}
      <div class="d-sm-none d-flex align-items-center th-more">
        {% include '@atoms/tm-links/icon-bookended/icon-bookended.twig' with {
          "text": more_link_text,
          "url": more_link_url,
          "icon_right": global_icon_right|default('fas fa-chevron-right'),
          "class": 'more-link',
        } only %}
      </div>
    {% endif %}
    </div>
  </div>
{% endif %}

{% if bottom_button %}
<div class="text-align-center mb-5">
  {{ bottom_button }}
</div>
{% endif %}

{% if wrapper_id %}
</div>
{%  endif %}
