{# LIBRARIES #}
{{ attach_library('ui_patterns/journey_planner_bar.journey_planner_bar_lib') }}

{% set exposed = show_exposed_booking_form_button|default(false) %}
{% set tablet_tabs_closed = tablet_tabs_closed|default(false) %}
{% set with_close = with_close|default(false) %}
{% set bt_title = bt_title|default("<i class=\"far fa-ticket-alt\"></i> Buy Tickets") %}
{% set pj_title = pj_title|default("<i class=\"far fa-map-marked-alt\"></i> Plan Journey") %}
{% set ld_title = ld_title|default("<i class=\"far fa-clock\"></i> Live Departures") %}
{% set sv_title = sv_title|default("<i class=\"fas fa-question-circle\"></i> Check service") %}
{% set nx_title = nx_title|default("<i class=\"fas fa-clock\"></i> Next Train") %}

{% set tab_items = [] %}

{# BUY TICKETS TAB #}
{% if booking_form_desktop %}
  {% set bt_content %}
    {{ exposed ? '<div class="mbo">' }}
    {{ booking_form_desktop }}
    {{ exposed ? '</div>' }}
  {% endset %}
  {% set bt = {
    tbid: "buy-tickets",
    title: bt_title,
    content: bt_content,
    nav_class: exposed ? 'mbo' : '',
    first: true
  } %}
  {# Add to items array #}
  {% set tab_items = tab_items|merge([bt]) %}
{% endif %}

{# BUY TICKETS EXPOSED #}
{% if exposed %}
  {% set bt_exposed_content = ' ' %}
  {% set bt_exposed = {
    tbid: "buy-tickets-exposed",
    title: bt_title,
    content: bt_exposed_content,
    first: false,
    nav_class: 'no-pane dto',
    nav_attrs: {
      "data-exposed-booking-form": "true"
    }
  } %}
  {% set tab_items = tab_items|merge([bt_exposed]) %}
{% endif %}

{# PLAN JOURNEY TAB #}
{% if plan_journey_form %}
  {% set pj_content %}
    <div class="col fullscreen-mobile" id="pj_form">{{ plan_journey_form }}</div>
  {% endset %}
  {% set pj = {
    tbid: "plan-journey",
    title: pj_title,
    content: pj_content,
    first: false
  } %}
  {# Add to items array #}
  {% set tab_items = tab_items|merge([pj]) %}
{% endif %}

{# LIVE DEPARTS TAB #}
{% if ld_search %}
  {% set ld_content %}
    <div class="col" id="ld_search">{{ ld_search }}</div>
  {% endset %}
  {% set ld = {
    tbid: "live-departures",
    title: ld_title,
    content: ld_content,
    first: false
  } %}
  {# Add to items array #}
  {% set tab_items = tab_items|merge([ld]) %}
{% endif %}

{# CHECK SERVICE TAB #}
{% if check_service_form %}
  {% set sv_content %}
    <div class="col" id="chk_serv">{{ check_service_form }}</div>
  {% endset %}
  {% set sv = {
    tbid: "check-service",
    title: sv_title,
    content: sv_content,
    first: false
  } %}
  {# Add to items array #}
  {% set tab_items = tab_items|merge([sv]) %}
{% endif %}

{# NEXT TRAIN TAB #}
{% if next_train_form %}
  {% set nx_content %}
    <div class="col" id="nxt_trn">{{ next_train_form }}</div>
  {% endset %}
  {% set nx = {
    tbid: "next-train",
    title: nx_title,
    content: nx_content,
    first: false
  } %}
  {# Add to items array #}
  {% set tab_items = tab_items|merge([nx]) %}
{% endif %}

{# TEMPLATE #}
<div class="col-md-12 {{ tablet_tabs_closed ? 'jpb-tab-clsd' }}" id="btjcd-nav">
  {{ pattern('bs-tabs-items', {
    'pid': 'btld',
    'items': tab_items,
    'list_suffix' : menu_lower,
    'nav_wrapper': true,
    'nav_only': true,
    'allow_close': true,
    'show_close': with_close,
  }, 'tbi_b') }}
  <div class="device"></div>
</div>

<div class="col-md-12 {{ exposed ? 'exp-jpb' }} {{ tablet_tabs_closed ? 'jpb-tab-clsd' }}" id="btjcd-tabs">
  <div class="row">

    <div class="col-lg-8" id="bt-wrapper">
      {{ pattern('bs-tabs-items', {
        'pid': 'btld',
        'items': tab_items,
        'wrapper_class': 'tbw-b',
        'content_only': true,
        'allow_close': true,
        'show_close': with_close,
      }, 'tbi_b') }}
    </div>

    <div class="col-lg-{{ exposed ? '12' : '4' }}" id="hjcd-wrapper">
      <div id="hjcd">
        {% if emulate_ajax %}<div id="jcdw">{% endif %}
          {{ jc_dropdown }}
        {% if emulate_ajax %}</div>{% endif %}
      </div>
    </div>

  </div>
</div>
