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

{# 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,
            } %}
          {% elseif modal_links %}
            {% set uid = "#{item.machineName}" %}
            {% set attr = create_attribute()
              .setAttribute('role', 'button')
              .setAttribute('tabindex', '0')
              .setAttribute('data-bs-toggle', 'modal')
              .setAttribute('data-bs-target', "#jcs-modal")
              .setAttribute('data-alt-toggle', "clicker")
              .setAttribute('data-alt-target', "#jcml-#{uid}")
            %}
            {% set show_link = (item.status != 'good') ? true : false  %}
            {% set show_link = item.showDetails ? true : show_link  %}
            <div class="service-update-anchor">
              {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
                "text": item.name,
                "status": item.status,
                "attr": attr,
                "class": 'service-update-anchor beliag belirf ' ~ item.class,
                "toggle": show_link ? 'sign' : null,
              } %}
            </div>
          {% 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" >
          {% if divider %}
            <hr class="rbs-divider">
          {% endif %}
          {% 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,
              } %}
            {% elseif modal_links %}
              {% set uid = "#{item.machineName}" %}
              {% set attr = create_attribute()
                .setAttribute('role', 'button')
                .setAttribute('tabindex', '0')
                .setAttribute('data-bs-toggle', 'modal')
                .setAttribute('data-bs-target', "#jcs-modal")
                .setAttribute('data-alt-toggle', "clicker")
                .setAttribute('data-alt-target', "#jcml-#{uid}")
              %}
              {% set show_link = (item.status != 'good') ? true : false  %}
              {% set show_link = item.showDetails ? true : show_link  %}
              <div class="service-update-anchor">
                {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
                  "text": item.name,
                  "status": item.status,
                  "attr": attr,
                  "class": 'service-update-anchor beliag belirf ' ~ item.class,
                  "toggle": show_link ? 'sign' : null,
                } %}
              </div>
            {% 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>
      {% endif %}

    </div>
  </div>

{% endif %}
