{# LIBRARIES #}
{{ attach_library('ui_patterns/station_header.station_header_lib') }}
{% set swap_sidebar_form = swap_sidebar_form|default(false) %}
{% set check_icon = global_icon_check|default('fal fa-check-square') %}
{% set top_layout = top_layout|default('address_and_ticket_office') %}

{# TEMPLATE #}
{% if swap_sidebar_form %}
  <div id="bkf-mobile-target" data-alt-toggle="swapper" data-alt-target=".exp-frm-wrap" data-alt-break-down="md"></div>
{% endif %}

<div id="station-header" class="st-hdr">

  <div class="row">
    {% if top_layout == 'address_and_ticket_office' %}

      <div class="col-md-12 st-name">
        <h2 class="station-header-text">{{ station }}</h2>
      </div>

      <div class="col-md-6 st-addr">
        <h3 class="station-address">Address:</h3>
        {% for line in address %}
          {{ line }}<br>
        {% endfor %}
      </div>

      <div class="col-md-6 st-off">
        <h3 class="station-ticket-office">Ticket office:</h3>
        {% for line in ticket_office %}
          {{ line }}<br>
        {% endfor %}
      </div>

    {% else %}

      <div class="col-md-{{ google_link ? '6 n-brd' : '12' }}">
        <h2 class="station-header-text">{{ station }}</h2>

        {% set collapse_content = '' %}
        {% for line in address %}
          {% set collapse_content = collapse_content ~ line ~ '<br>' %}
        {% endfor %}

        {% include '@molecules/tm-bs/collapse/collapse.twig' with {
          'content_first': true,
          'content': collapse_content,
          'content_classes': 'station-address',
          'toggle': 'chevron',
          'level': 'inline',
          'label': 'Show address',
          'hide_label': 'Hide address',
          'content_fade': true,
        } only %}
      </div>

      {% if google_link %}
        {% set google_image %}
          {% include '@atoms/html5/image/image.twig' with {
            'url': file_url('ws-assets://images/google-maps-logo.svg'),
            'alt': 'Google maps logo',
          } only %}
        {% endset %}
        <div class="col-md-6 text-md-end mt-3 mt-md-0">
          {% include '@atoms/tm-links/standard/standard.twig' with {
            'text': google_image ~ ' Show me on Google Maps',
            'url': google_link,
            'class': 'btn btn-outline-custom-color-reverse st-gl btn-ilf fw-bold',
            'target': '_blank',
          } only %}
        </div>
      {% endif %}

    {% endif %}
  </div>
{% if gallery %}
  <div class="row st-map-gallery">
    <div class="col-md-8 p-0">
{% endif %}
  <div class="map mt-4 mb-4">
    {{ map }}
  </div>

  {% if gallery %}
    </div>
    <div class="col-md-4 p-0">
      <div class="gallery mt-4 mb-4">
        {{ gallery }}
      </div>
    </div>
  </div>
  {% endif %}

  {% if checklist %}
    {% set is_advanced_checklist = checklist[0]['text'] %}
    <div class="row">
    {% if is_advanced_checklist %}
      <div class="col-md-6">
        <ul class="fa-ul">
        {% for item in checklist %}
          <li>
            <div class="li-feature">
              <span class="fa-li"><i class="{{ item['icon'] ? item['icon'] : check_icon }}"></i></span>
              {% if item['url'] %}
                {% include '@atoms/tm-links/standard/standard.twig' with {
                  'text': item['text'],
                  'url': item['url'],
                  'class': 'text-white',
                } only %}
              {% else %}
                {{ item['text'] }}
              {% endif %}
            </div>
          {% if item['subtext'] %}
            {% set subtexts = item['subtext'][0] ? item['subtext'] : [item['subtext']] %}
            {% for subtext in subtexts  %}
              {% if not loop.first %}
                <br>
              {% endif %}
              {{ subtext }}
            {% endfor %}
          {% endif %}
          </li>
          {% if item['break'] %}
        </ul>
      </div>
      <div class="col-md-6">
        <ul class="fa-ul">
          {% endif %}
        {% endfor %}
        </ul>
      </div>
    {% else %}
      {% for items in checklist|batch((checklist|length / 2), '') %}
        <div class="col-md-6">
          <ul class="fa-ul">
            {% for item in items %}
              {% if item %}
                <li><span class="fa-li"><i class="{{ check_icon }}"></i></span> {{ item }}</li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    {% endif %}
    </div>
  {% endif %}

  {% if post %}
    <div class="st-post">
      {{ post }}
    </div>
  {% endif %}

</div>
