{# DOCS #}
{#
  item
   - id
   - isRoute
   - name
   - machineName
   - status
   - statusText
   - hasIncidents
#}
{# LIBRARIES #}
{{ attach_library('ui_patterns/jc_dropdown.jc_base') }}
{{ attach_library('ui_patterns/jc_modal.jc_modal_lib') }}

{# VARIABLES #}
{% set uid = uid|default('') %}
{% if uid %}
  {% set uid = "#{uid}-#{item.machineName}-#{item.id}" %}
{% else %}
  {% set uid = "#{item.machineName}" %}
{% 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}")
%}

{# 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 %}

{# TEMPLATE #}
<div class="jc-modal-item status-{{ item.status }} {{ cols|default('col-md-12') }}">
  <!-- Collapse trigger -->
  <h2>
    {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
      "text": "#{item.name} <span class='status'>#{item.statusText}</span>",
      "status": item.status,
      "class": item.status ~ ' service-update-anchor beliag belirf aat-cancel',
      "attr": (item.status == 'good') ? [] : attributes,
      "url": (item.status == 'good') ? null : '#',
      "toggle": (item.status == 'good') ? null : 'sign'
    } %}
  </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': item.machineName,
            'pid': pid,
          } only %}
        {% 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>
