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

{# VARIABLES #}
{% set content_data = content_data|default(null) %}
{% set content_classes = ['collapse', 'list-content'] %}

{# TEMPLATE #}
{% if content_data %}

<div class="table-responsive">
  <table class="table table-bordered table-restriped bt_table">

    <thead>
      <tr>
        <th scope="col">Platform</th>
        <th scope="col">{{ type == 'arrive' ? 'Origin' : 'Destination' }}</th>
        <th scope="col">{{ type == 'arrive' ? 'Arrives' : 'Departs' }}</th>
        <th scope="col">Expected</th>
        <th scope="col">{{ type == 'arrive' ? 'Destination' : 'Origin' }}</th>
        <th scope="col">Operator</th>
        <th></th>
      </tr>
    </thead>

    <tbody>
    {% set counter = 1 %}
    {% for data in content_data %}

      {% set id = type ~ '-' ~ loop.index0 %}

      {% set attr = create_attribute()
        .setAttribute('data-bs-target', '#' ~ id)
        .setAttribute('data-bs-toggle', 'collapse')
        .setAttribute('tabindex', '0')
      %}
      {% set ajax_attr = altcom_ajax_attrs_string(
        'nre_ldb_calling_points', id,
        {'service_id': data['serviceID']}, 1, 0, 1)  %}
      {% set counter = counter + 1 %}
      <tr {{ attr }} {{ ajax_attr|raw }} class="bt-row aat-cancel {{ counter is odd ? 'odd' }}">

        <td>{{ data.platform }}</td>
        <td>{{ type == 'arrive' ? data.origin : data.destination }}</td>
        <td>{{ type == 'arrive' ? data.arrives : data.departs }}</td>
        <td>{{ data.expected }}</td>
        <td>{{ type == 'arrive' ? data.destination : data.origin }}</td>
        <td>{{ data.operator }}</td>

        <td>

          {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
            "text": "<span class='sr-only'>Expand</span>",
            "toggle": "sign",
            "url": "#",
            "class": "bt_data"
          } %}

        </td>

      </tr>

      <tr class="bt-row-expanded">
        <td colspan="7">
          <div class="collapse"
               data-alt-toggle="state"
               data-alt-target="collapse"
               id="{{ id }}">
            <div class="m-4">
              {% include "@molecules/tm-bs/spinner/spinner.twig" with {'size': 'sm', 'show_text': true} only %}
            </div>
          </div>
        </td>
      </tr>

    {% endfor %}

    </tbody>
  </table>
</div>
{% endif %}
