{# 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') %}
{% set map_show_short = map_show_short|default(false) %}

{# 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 or map %}
    <div class="row {% if gallery or map_show_short %}st-map-gallery{% endif %}">
      {% if map %}
        <div class="{{ gallery ? 'col-md-8' : 'col-md-12' }} p-0">
          <div class="map mt-4 mb-4">
            {{ map }}
          </div>
        </div>
      {% endif %}
      {% if gallery %}
        <div class="col-md-4 p-0">
          <div class="gallery mt-4 mb-4">
            {{ gallery }}
          </div>
        </div>
      {% endif %}
    </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>
