{# LIBRARIES #}
{{ attach_library('ui_patterns/nre_ad_boards.nre_ad_lib') }}
{{ attach_library('ui_patterns/reveal_all.reveal_all_lib') }}
{{ attach_library('ui_patterns/libraries.bs_tab') }}
{{ attach_library('ui_patterns/bs-tabs.tabs_lib') }}

{# VARIABLES #}
{% set departure_data = departure_data|default(null) %}
{% set arrival_data = arrival_data|default(null) %}
{% set tabbed = tabbed|default(false) %}
{% set tabs_style = tabs_style|default('full') %}
{% set responsive = responsive|default(false) %}
{% set row_limit = row_limit|default(10) %}
{% set preview_limit = preview_limit|default(false) %}
{% set hide_departs = hide_departs|default(false) %}
{% set hide_arrivals = hide_arrivals|default(false) %}
{% set next_limit = next_limit|default(false) %}
{% set ad_header_tag = ad_header_tag | default('h4') %}
{% set h = ad_header_tag|lower %}
{% set departure_title = departure_title|default('Departures') %}
{% set arrival_title = arrival_title|default('Arrivals') %}
{% if h not in ['h2','h3','h4'] %}
  {% set h = 'h4' %}
{% endif %}

{% set tid = 'nre-ldb-stations-' ~ station %}

{% if departure_data or arrival_data %}

  {% set departure_table %}
    {% include "@organisms/tm-ldb/nre-ad-table/_nre-ad-table.twig" with{
      "content_data": departure_data,
      "type": 'depart',
      "responsive": responsive,
      "row_limit": row_limit,
    } %}
  {% endset %}
  
  {% set arrival_table %}
    {% include "@organisms/tm-ldb/nre-ad-table/_nre-ad-table.twig" with{
      "content_data": arrival_data,
      "type": 'arrive',
      "responsive": responsive,
      "row_limit": row_limit,
    } %}
  {% endset %}

  {% if not tabbed %}
    <div class="bt_table_wrapper">
      {# Departures #}
      {% if departure_data and not hide_departs %}
        {% if h == 'h2' %}
          <h2 class="ad-header">{{ departure_title }}</h2>
        {% elseif h == 'h3' %}
          <h3 class="ad-header">{{ departure_title }}</h3>
        {% else %}
          <h4 class="ad-header">{{ departure_title }}</h4>
        {% endif %}
        {{ departure_table }}
      {% endif %}
      {# Arrivals #}
      {% if arrival_data and not hide_arrivals %}
        {% if h == 'h2' %}
          <h2 class="ad-header">{{ arrival_title }}</h2>
        {% elseif h == 'h3' %}
          <h3 class="ad-header">{{ arrival_title }}</h3>
        {% else %}
          <h4 class="ad-header">{{ arrival_title }}</h4>
        {% endif %}
        {{ arrival_table }}
      {% endif %}
    </div>
  {% else %}

    {% set tab_pattern = tabs_style == 'full' ? 'tbi_e' : 'tbi_i' %}

    {% set depart_tab = {
      tbid: "dpt",
      title: departure_title,
      content: departure_table,
      first: true
    } %}

    {% set arrive_tab = {
      tbid: "arb",
      title: arrival_title,
      content: arrival_table,
      first: false
    } %}

    {{ pattern('bs-tabs-items', {
      'pid': 'ldb',
      'handle_state': true,
      'items': [depart_tab, arrive_tab],
    }, tab_pattern) }}

  {% endif %}

  {# New 'show more' button #}
  {% if preview_limit and (preview_limit < next_limit) %}
    <div class="reveal-all mt-2">
      {% set ajax_attrs = altcom_ajax_attrs_array(
        'nre_ldb_stations',
        tid,
        { 'station': station,
          'calling_at': calling_at,
          'tabbed': tabbed,
          'tabs_style': tabs_style,
          'row_limit': next_limit,
          'preview_limit': false,
          'next_limit': false,
        },
        1, 0, 0)
      %}
      {% set link_attrs = create_attribute() %}
      {% for k, v in ajax_attrs %}
        {% set link_attrs = link_attrs.setAttribute(k, v) %}
      {% endfor %}

      {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
        "text": "<i class='d-none fas fa-spinner-third spin'></i> Show more trains",
        "toggle": 'chevron',
        "attr": link_attrs,
        "tag_name": 'span',
        "class": "belian fw-bold",
      } only %}

    </div>
  {% endif %}

{% elseif no_journeys_message %}
  <div class="no-trains">
    {% include "@organisms/tm-message/alerts/alerts.twig" with {
      "message_list": {
        "info": {
          no_journeys_message
        }
      },
      "item_layout": "side_icon",
      "without_headers": true,
      "icon_set": "outline",
      "custom_colours": true,
    } only %}
  </div>
{% endif %}
