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


<div id="map-panes">
  <div id="map-p-0" role="tabpanel">
    {{ destination_map }}
  </div>
  {% for station in stations %}
    <div class="st-map"
         id="map-p-{{ station.id }}"
         role="tabpanel">
      {{ station.map }}
    </div>
  {% endfor %}
</div>

<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" data-alt-target="map-p-{{ station.id }}">
      <h3><i class="fas fa-map-marker-alt"></i> {{ station.title|raw }}</h3>
      <span>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>

