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

{# VARIABLES #}
{% set divider = divider|default(false) %}
{% set is_first_child = is_first_child|default(false) %}
{% set parent = parent|default('') %}
{% set uid = uid|default('') %}
{% set machine_name = item.machineName|replace({'&': ''}) %}
{% set status_class = status_class|default('') %}
{% set status_message_separator = status_message_separator|default(' - ') %}
{% set icon_stack_fa = icon_stack_fa|default(false) %}
{% if uid %}
  {% set uid = "#{uid}-#{machine_name}-#{item.id}" %}
{% else %}
  {% set uid = "#{machine_name}" %}
{% endif %}

{% set pid = pid|default('') %}
{% if pid %}
  {% set uid = "#{pid}-#{uid}" %}
{% endif %}

{% set attributes = create_attribute()
  .setAttribute('id', "jcml-#{uid}")
  .setAttribute('data-bs-toggle', 'collapse')
  .setAttribute('data-bs-target', "#jcmi-#{uid}")
  .setAttribute('data-alt-jct', machine_name)
  .setAttribute('data-alt-jcc', is_child)
  .setAttribute('data-alt-jcp', parent)
  .setAttribute('role', 'button')
  .setAttribute('aria-expanded', 'false')
  .setAttribute('aria-controls', "jcmi-#{uid}")
  .setAttribute('tabindex', '0')
%}

{# If the item has children, loading these #}
{% if not item.children %}
  {% set ajax_attrs = altcom_ajax_attrs_array(
    "journey_check_route_details",
    "jc-mpi-#{uid}",
    {"route_id": item.id, 'uid': uid, 'pid': pid}, 1, 0, 1)
  %}
  {% for k, v in ajax_attrs %}
    {% set attributes = attributes.setAttribute(k, v) %}
  {% endfor %}
{% endif %}

{% if is_first_child and divider %}
  <hr class="rbs-divider mt-3 mb-3">
{% endif %}

{# TEMPLATE #}
<div class="jc-modal-item status-{{ item.status }} {{ cols|default('col-md-12') }}">
  <!-- Collapse trigger -->
  <h2 class="item">
    {% set show_link = (item.status == 'good') ? false : true %}
    {% set show_link = (item.showDetails) ? true : show_link %}
    {% set show_link = (item.hasIncidents) ? true : show_link %}
    {% set show_link = (item.children) ? true : show_link %}

    {% set text %}
      {% set statusMessage = '' %}
      {% if item.statusText %}
        {% set statusMessage %}
          <span class='status {{ status_class }}'>{{ item.statusText }}</span>
        {% endset %}
      {% endif %}
      {% if item.statusDescription %}
        {% set statusMessage %}
          <span class="jcs-affected {{ status_class }}">{{ status_message_separator }}{{ item.statusDescription|raw }}</span>
        {% endset %}
      {% endif %}
      {{ item.name }} {{ statusMessage|raw }}
    {% endset %}

    {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
      "text": text|raw,
      "status": item.status,
      "class": item.status ~ ' service-update-anchor beliag belirf aat-cancel',
      "attr":show_link ? attributes : [],
      "url": show_link ? "#jcmi-#{uid}" : null,
      "toggle": show_link ? 'sign' : null,
      "icon_stack_fa": icon_stack_fa,
    } %}
  </h2>
  <!-- / Collapse trigger -->

  <!-- Collapse area -->
  <div id="jcmi-{{ uid }}"
       class="service-group route-details collapse"
       data-alt-toggle="state"
       data-alt-target="collapse"
       aria-expanded="false">
    <!-- Details -->
    <div id="jc-mpi-{{ uid }}">
      {% if item.children %}
        {% for childItem in item.children %}
          {% include '@organisms/tm-jc/jc-modal/jc-modal-items/journey-check-item.html.twig' with {
            'item': childItem,
            'uid': machine_name,
            'pid': pid,
            'parent': "jcml-#{uid}",
            'is_first_child': loop.first
          } %}
          {% if divider and not loop.last %}
            <hr class="rbs-divider sub">
          {% endif %}
        {% endfor %}
      {% else %}
        <div class="service-loader incident">
          {% include "@molecules/tm-bs/spinner/spinner.twig" with {
            'size': 'sm', 'show_text': true
          } only %}
        </div>
      {% endif %}
    </div>
    <!-- / Details -->
  </div>
  <!-- / Collapse area -->
</div>
