{{ attach_library('ui_patterns/th_things_to_do.th_things_to_do_lib') }}
{{ attach_library('ui_patterns/libraries.bs_popover') }}
{{ attach_library('ui_patterns/bs_popover.popover_lib') }}

{% if image %}
  <div id="th-things-image" class="mb-3">
    {{ image }}
    {% if image_credits %}
      <span class="image-credits">{{ image_credits }}</span>
    {% endif %}
  </div>
{% endif %}

{% if description %}
  {% set fade_class = '' %}
  {% set too_long = description|length > 380 %}
  {% if too_long %}
    {% set fade_class = ' add-fade' %}
  {% endif %}
  <div id="th-things-intro-text" class="{{ fade_class }}">
    {{ description|raw }}
    {% if too_long %}
      <div class="more">
        <button class="btn">More <i class="fas fa-chevron-down"></i></button>
      </div>
    {% endif %}
  </div>
{% endif %}

{% if link_blocks is not empty %}
  {% include '@organisms/tm-th/things-to-do/partials/link-blocks.twig' %}
{% endif %}

{% if info_sections is not empty %}
  {% include '@organisms/tm-th/things-to-do/partials/info-section.twig' %}
{% endif %}

{% if address %}
  <div id="th-things-station-header">
    <div class="station-address">
      {% for line in address %}
        <span>{{ line }}{% if not loop.last %},{% endif %}</span>
      {% endfor %}
    </div>
    {% if closest_station_directions %}
      <div class="directions-wrapper ta-r">
        <a href="{{ closest_station_directions }}" class="btn btn-outline-default directions">Directions from {{ closest_station|default('the closest station') }}</a>
      </div>
    {% endif %}
  </div>
{% endif %}
{% if map %}
  <div id="th-things-map-wrapper" class="mb-5">{{ map }}</div>
{% endif %}

{% if fares %}
  {{ fares }}
{% endif %}
