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

{% set show_header = show_header ?? true %}

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

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

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

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

{% if blocks %}
  <div class="th-cards{% if scroller %} th-scrollable{% endif %}">
    <div class="row flex-nowrap mb-5{% 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,
          "img_url": block.img_url,
          "img_alt": block.img_alt,
          "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 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 wrapper_id %}
</div>
{%  endif %}
