{# LIBRARIES #}
{{ attach_library('ui_patterns/jc_dropdown.jc_base') }}
{{ attach_library('ui_patterns/jc_updates.jc_updates_lib') }}
{{ attach_library('ui_patterns/bs-collapse.collapse_lib') }}

{# VARIABLES #}
{% set items = element.items %}
{% set cutoff = cutoff|default(4)%}
{% set item_name = item_name|default('disruptions')%}
{% set status_class = status_class|default('') %}
{% set cols = cols|default('col-lg-6') %}

{% if items is iterable %}

  {# BLOCKS #}
  <div id="live-travel" class="live-update has-details">

    <div class="live-travel-updates split-details" id="live-travel-updates">
      {% if top_message %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "text": top_message.text,
          "class": "live-travel-top-message",
          "icon_left": top_message.icon_left,
        } %}
      {% endif %}

      <div class="row">
        {% for item in items|slice(0, cutoff) %}
          {% include '@organisms/tm-jc/jc-modal/jc-modal-items/journey-check-item.html.twig' with {
            'item': item,
            'cols': cols,
            'pid': 'jcs',
          } %}
        {% endfor %}
      </div>

      {% if items|length > cutoff %}

        {% set attributes = attributes
          .setAttribute('id', 'lusml')
          .setAttribute('data-bs-toggle', 'collapse')
          .setAttribute('data-bs-target', "#lusmc")
          .setAttribute('aria-expanded', 'false')
          .setAttribute('tabindex', '0')
          .setAttribute('role', 'button')
        %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "text": "Show all #{ items|length } #{ item_name }",
          "attr": attributes,
          "class": "collapsed belian",
          "url": "#lusmc",
          "toggle": "chevron",
        } %}

        <div class="collapse row" id="lusmc" >
          {% for item in items|slice(cutoff, items|length) %}
            {% include '@organisms/tm-jc/jc-modal/jc-modal-items/journey-check-item.html.twig' with {
              'item': item,
              'cols': 'col-lg-6',
              'pid': 'jcs',
            } %}
          {% endfor %}
        </div>
      {% endif %}

    </div>
  </div>

{% endif %}
