{#
rid
status
element
  - id
  - title
  - text
  - updateText
  - extraInfo
  - hasCallingPoints
  - callingPoints
  - rid (id of parent route)
#}

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

{# VARIABLES #}
{% set uid = uid|default('') %}
{% set pid = pid|default('') %}
{% set incident_button_class = global_button_incident|default('btn btn-sm btn-outline-default') %}

{# TEMPLATE #}
{% if element.text %}

  {% if element.text %}
    <div class="incident-info">{{ element.text|jc_header_level(3)|raw }}</div>
  {% endif %}

  <div class="details-incidents pt-3">
    {% if element.hasCallingPoints %}

      {% if element.callingPoints|length %}

        {% include '@organisms/tm-jc/jc-modal/jc-modal-calling-points/journey-check-calling-points.html.twig' with {
          'data': element.callingPoints
        } only %}

      {% else %}

        {% set link_attributes = create_attribute()
          .setAttribute('id', "jccpt-#{uid}")
          .setAttribute('data-bs-target', "#jccpc-#{uid}")
          .setAttribute('data-bs-toggle', 'collapse')
          .setAttribute('tabindex', '0')
          .setAttribute('role', 'button')
        %}
        {% set ajax_attrs = altcom_ajax_attrs_array(
          "journey_check_calling_points",
          "jccpc-#{uid}",
          {"incident_id": element.id}, 1, 0)
        %}
        {% for k, v in ajax_attrs %}
          {% set link_attributes = link_attributes.setAttribute(k, v) %}
        {% endfor %}
        {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
          "text": 'Calling at stations',
          "attr": link_attributes,
          "toggle": 'chevron',
          "class": 'cabtn belinline aat-cancel belian ' ~ incident_button_class,
        } %}

        <div class="calling-stations collapse"
             data-alt-toggle="state"
             data-alt-target=collapse"
             id="jccpc-{{ uid }}"
             aria-expanded="false">
          <div class="service-loader">
            {% include "@molecules/tm-bs/spinner/spinner.twig" with {
              'size': 'sm', 'show_text': true
            } only %}
          </div>
        </div>

      {% endif %}

    {% endif %}

    {% if element.extraInfo %}
      <div class="ext-info-ac accordion" id="xia-{{ uid }}">
        {% for info in element.extraInfo %}
          <div class="ext-info-item">
            {% set eid = uid ~ '-' ~ loop.index0 %}
            {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
              "text": info.title,
              "attr": create_attribute()
                .setAttribute('id', "xit-#{eid}")
                .setAttribute('data-bs-target', "#xic-#{eid}")
                .setAttribute('data-bs-toggle', 'collapse')
                .setAttribute('tabindex', '0')
                .setAttribute('role', 'button')
                .setAttribute('aria-controls', "xic-#{eid}"),
              "toggle": 'chevron',
              "class": 'belinline aat-cancel belian ' ~ incident_button_class,
            } %}
            {% set collapse_attr = create_attribute()
              .setAttribute('id', "xic-#{eid}")
              .setAttribute('aria-labelledby', "xit-#{eid}")
              .setAttribute('data-bs-parent', "#xia-#{uid}")
              .setAttribute('data-alt-toggle', "state")
              .setAttribute('data-alt-target', "collapse")
            %}
            <div {{ collapse_attr.addClass('collapse') }}>
              <div class="ext-info-inner">
                {{ info.text|jc_header_level(3)|raw }}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>

{% else %}
  <div id="jci-{{ uid }}">
    <div class="service-loader">
      {% include "@molecules/tm-bs/spinner/spinner.twig" with {
        'size': 'sm', 'show_text': true
      } only %}
    </div>
  </div>
{% endif %}

{% if element.updateText %}
  <div class="incident-update">{{ element.updateText|jc_header_level(3)|raw }}</div>
{% endif %}

