{# LIBRARIES #}
{{ attach_library('ui_patterns/jc_dropdown.jc_base') }}
{{ attach_library('ui_patterns/jc_updates.jc_updates_lib') }}

{# VARIABLES #}
{% set items = element.items %}
{% set cutoff = 4 %}

{% 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">

      <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': 'col-lg-6',
            'pid': 'jcs',
          } only %}
        {% 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')
        %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "text": "Show all #{ items|length } disruptions",
          "attr": attributes,
          "class": "collapsed belian",
          "url": "#lusmc",
          "toggle": "chevron",
        } only %}

        <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',
            } only %}
          {% endfor %}
        </div>
      {% endif %}

    </div>
  </div>

{% endif %}
