{# EXTENDS #}
{% set items = element.items %}
{% set status = element.status %}
{% set status_text = element.statusText %}
{% set footer_text = element.footerText %}
{% set extra_link = element.link %}
{% set filtered = element.filtered %}
{% set triggerUrl = element.triggerUrl %}

{# LIBRARIES #}
{{ attach_library('ui_patterns/libraries.bs_collapse') }}
{{ attach_library('ui_patterns/jc_dropdown.jc_base') }}
{{ attach_library('ui_patterns/jc_dropdown.jc_dropdown_lib') }}

{# TEMPLATE #}
<!-- JC Block - Dropdown -->
<div id="jcd">
  <!-- Collapse trigger -->
  {% set attr = create_attribute() %}
  {% set class = [
    'service-update-button',
    triggerUrl ? 'belianr' : 'beliag belirf',
  ]|join(' ') %}

  {% if not triggerUrl %}
    <!-- Collapse trigger -->
    {% set attr = attr
      .setAttribute('data-bs-toggle', 'collapse')
      .setAttribute('role', 'button')
      .setAttribute('tabindex', '0')
      .setAttribute('data-bs-target', '#journey-check-service-groups')
    %}
  {% endif %}

  {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
    "text": status_text ~ " <span class='sr-only'>Get information on the service status of routes</span>",
    "status": status,
    "attr": attr,
    "icon_stack_fa": true,
    "class": class,
    "toggle": triggerUrl ? '' : 'sign',
    "icon_right": triggerUrl ? global_icon_right|default('fas fa-chevron-right') : '',
    "url": triggerUrl ?? '',
  } %}
  <!-- / Collapse trigger -->

  {% if not triggerUrl %}
  <!-- Collapse area -->
    <div id="journey-check-service-groups" class="collapse clearfix {{ extra_link ? 'ext-link' }}">
      {% if extra_link %}
        {% set attr = create_attribute() %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "text": extra_link.text,
          "url": extra_link.url,
          "attr": attr,
          "icon_left": extra_link.icon,
          "icon_right": global_icon_right|default('fas fa-chevron-right'),
          "icon_stack_fa": true,
          "class": 'service-update-anchor beliag belirf e-link ' ~ extra_link.class,
        } %}
      {% endif %}
      {% for link in items %}
        {% set uid = "#{link.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 = (link.status != 'good') ? true : false  %}
        {% set show_link = link.showDetails ? true : show_link  %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "text": link.name ~ " <span class='sr-only'>Get information on the " ~ link.name ~ " route</span>",
          "status": link.status,
          "attr": attr,
          "class": 'service-update-anchor beliag belirf ' ~ link.class,
          "toggle": show_link ? 'sign' : null,
          "icon_stack_fa": true,
        } %}
      {% endfor %}
      {% if filtered %}
        {% set ajax_attrs = altcom_ajax_attrs_string(
          'journey_check_dropdown_items',
          'jcdw',
          {}, 1, 0, 1)
        %}
        <button id="unfilter-routes-dropdown" class="service-update-anchor w-100 text-align-left" {{ ajax_attrs }}>View status of other routes</button>
      {% endif %}
    </div>
  <!-- / Collapse area -->
  {% endif %}

</div>
<!-- / JC Block -->
