<div class="table-responsive">
  <table class="table table-bordered table-restriped bt_table {{ responsive ? 'responsive' }}">

    <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 ~ id_extra ~ '-' ~ loop.index0 %}

      {% set attr = create_attribute()
        .setAttribute('data-bs-target', '#' ~ id)
        .setAttribute('data-bs-toggle', 'collapse')
        .setAttribute('data-service-id', data.serviceID)
        .setAttribute('role', 'button')
        .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-label="Platform">{{ data.platform }}</td>
        <td data-label="{{ type == 'arrive' ? 'Origin' : 'Destination' }}">{{ type == 'arrive' ? data.origin : data.destination }}</td>
        <td data-label="{{ type == 'arrive' ? 'Arrives' : 'Departs' }}">{{ type == 'arrive' ? data.arrives : data.departs }}</td>
        <td data-label="Expected">{{ data.expected }}</td>
        <td data-label="{{ type == 'arrive' ? 'Destination' : 'Origin' }}">{{ type == 'arrive' ? data.destination : data.origin }}</td>
        <td data-label="Operator">{{ 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",
            "display": "noflex"
          } %}

        </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 mt-0 pt-4">
              {% include "@molecules/tm-bs/spinner/spinner.twig" with {'size': 'sm', 'show_text': true} only %}
            </div>
          </div>
        </td>
      </tr>

    {% endfor %}

    </tbody>

  </table>
</div>
