{# 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 divider = divider|default(false) %}
{% 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') %}
{% set nav_link = nav_link|default(false) %}
{% set nav_link_url = nav_link_url|default('') %}

{# If front page and show items as links true, render as links not drop downs #}
{% if is_front and as_links %}
  {% set nav_link = true %}
{% endif %}

{% 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) %}
          {% if nav_link %}
            {% include "@organisms/tm-jc/jc-modal/jc-modal-items/journey-check-link.html.twig" with {
                'item': item,
                'cols': cols,
                'status_class': status_class,
                'pid': 'jcs',
                'nav_link_url': nav_link_url,
              } %}
          {% else %}
            {% include "@organisms/tm-jc/jc-modal/jc-modal-items/journey-check-item.html.twig" with {
              'item': item,
              'cols': cols,
              'status_class': status_class,
              'pid': 'jcs'
            } %}
          {% endif %}
          {% if divider %}
            {% if not loop.last %}
              <hr class="rbs-divider">
            {% endif %}
          {% endif %}
        {% 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) %}
            {% if nav_link %}
              {% include "@organisms/tm-jc/jc-modal/jc-modal-items/journey-check-link.html.twig" with {
                'item': item,
                'cols': cols,
                'status_class': status_class,
                'pid': 'jcs',
                'nav_link_url': nav_link_url,
              } %}
            {% else %}
              {% include "@organisms/tm-jc/jc-modal/jc-modal-items/journey-check-item.html.twig" with {
                'item': item,
                'cols': cols,
                'status_class': status_class,
                'pid': 'jcs',
              } %}
            {% endif %}
          {% endfor %}
          {% if divider %}
            {% if not loop.last %}
              <hr class="rbs-divider">
            {% endif %}
          {% endif %}
        </div>
      {% endif %}

    </div>
  </div>

{% endif %}
