{# LIBRARIES #}
{{ attach_library('ui_patterns/jc_dropdown.jc_base') }}
{{ attach_library('ui_patterns/jc_popup.jc_popup_lib') }}

{# VARIABLES #}
{% set cutoff = 4 %}

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

  <div class="live-travel-updates split-details" id="live-travel-updates">

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

    {% if data.items|length > cutoff %}

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

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

  </div>
</div>
