
{# LIBRARIES - Remember, this is ajax, so all child libs need to be loaded #}
  {{ attach_library('ui_patterns/libraries.bs_collapse') }}
  {{ attach_library('ui_patterns/jc_dropdown.jc_base') }}
  {{ attach_library('ui_patterns/jc_modal.jc_modal_lib') }}

{# VARIABLES #}
{% set content_class = 'jcm-items-efx' %}
{% set content_attributes = create_attribute()
  .setAttribute('data-aa-efx-class', 'efx-pulse efx-warning')
  .setAttribute('data-aa-efx-duration', '0.9')
%}
{% set uid = 'jcs-modal' %}
{% set size = 'lg' %}
{% set showbutton = showbutton %}
{% set title_tag = 'h4' %}
{% set title = title|default("<i class='fas fa-info mx-1'></i> Live travel updates")%}
{% set pass_through = element.pass_through|default({}) %}
{% set modal = element.modal|default(1) %}
{% set extra_link = element.link|default(null) %}

{% set header_extra %}
  <div class='latest-update ffl'>

    <span class="update">
      Last update: <span id="jcm-items-update">{{ "now"|date("H:i", "Europe/London") }}</span>
    </span>

    {% set ajax_button_text %}
      <i class='fas fa-sync-alt'></i>
      <span class='sr-only'>Refresh</span>
    {% endset %}

    {{ altcom_ajax_link(
      ajax_button_text,
      "journey_check_modal_items",
      "jcm-items", {'pass_through': pass_through}, 1, 1, 0, 900)
    }}

  </div>
{% endset %}

{% set content %}
<div id="live-travel-service-groups">
  <div id="jcm-items">Loading...</div>
</div>
{% endset %}

{%  if modal %}
  {# EMBED #}
  {% embed "@organisms/tm-bs/modal/modal.twig" %}

  {# BLOCKS #}
  {% block body %}
    {# TEMPLATE #}
    <div class="modal-body">
      {{ content }}
    </div>
  {% endblock %}

  {% block footer %}{% endblock %}

  {% endembed %}
{% else %}
  <div id="live-travel-service-groups-block" class="mt-4">
    {{ header_extra }}
    {% if extra_link %}
      {% set attr = create_attribute() %}
      {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
        "text": extra_link.text,
        "url": extra_link.url,
        "attr": attr,
        "icon_left": extra_link.icon,
        "icon_right": '',
        "class": 'beliag e-link btn ' ~ extra_link.class,
      } %}
    {% endif %}
    {{ content }}
  </div>
{% endif %}
