{# LIBRARIES #}
{{ attach_library('ui_patterns/destinations_maps.destinations_maps_lib') }}

{# TEMPLATE #}
{% if destination_map or stations %}
  <div id="map-panes">
    {% if destination_map %}
      <div id="map-p-0" role="tabpanel">
        {{ destination_map }}
      </div>
    {% endif %}
    {% for station in stations %}
      <div class="st-map {{ (not destination_map and loop.index == 1 ) ? 'st-no-dest st-map-visble' }}"
           id="map-p-{{ station.id }}"
           role="tabpanel">
        {{ station.map }}
      </div>
    {% endfor %}
  </div>
{% endif %}

{% if stations %}
  <div class="dest-sts">
    <h2 class="dest-st-hdr">Stations</h2>
    <div class="dest-st-crds">
    {% for station in stations %}
      <div class="dest-st-crd dsmt {{ (not destination_map and loop.index == 1 ) ? 'active' }}" data-alt-target="map-p-{{ station.id }}">
        <h3><i class="fas fa-map-marker-alt"></i> {{ station.title|raw }}</h3>
        <span class="dest-addr-title">Address:</span>
        <div class="dest-st-crd-addr">
          {{ station.addr|raw }}
        </div>
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          'url': station.url,
          'text': 'Visit station page',
          'icon_right': global_icon_right|default('fas fa-chevron-right'),
          'class': 'belianr st-link'
        } only %}
      </div>
    {% endfor %}
    </div>
  </div>
{% endif %}
