{# LIBRARIES #}
{{ attach_library('ui_patterns/tourism_hub_region_selector_block.tourism_hub_region_selector_block_lib') }}

{% set hide = region ? '' : ' hide' %}

<div class="th-region-container">
  <div class="container">
    <div class="row">
      <div class="col-12">
        {% if region %}
          <div class="th-region p-0 py-1">
            <i class="fas fa-arrow-right fs-4 pe-3"></i><h2 class="mb-0 d-inline-block">{{ region }}</h2>
          </div>
        {% else %}
          <div class="th-region p-0 py-2"></div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
<div class="th-regions-container mb-5">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="th-regions">
          <h2 class="py-4">{{ header }}</h2>
          {% set content %}
            <div class="d-flex justify-content-between">
              <div class="d-flex flex-wrap gap-4 mb-4">
                {% for item in items %}
                  {{ item }}
                {% endfor %}
              </div>
              {% if bg_graphic %}
                <div class="graphic-container d-none d-md-block">
                  {{ bg_graphic|raw }}
                </div>
              {% endif %}
            </div>
          {% endset %}
          {% include '@molecules/tm-bs/collapse/collapse.twig' with {
            'label': 'Show',
            'tgl_label': 'Hide',
            'active': true,
            'link_class': 'toggle region-toggle btn btn-default mt-4' ~ hide,
            'content': content,
          } only %}
        </div>
      </div>
    </div>
  </div>
</div>