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

{# TEMPLATE #}
<h2>{{ origin }} to {{ destination }}</h2>
<h3 class="sr-only">{{ route }}</h3>

{{ elements.disclaimer|raw }}

{% if heatmap_settings.key == 'above' %}
  {% include '@organisms/tm-lbt/lbt-key/lbt-key.twig' with {'heatmap_settings': heatmap_settings } only %}
{% endif %}

{% set colspan = 6 %}
{% if available_seats %}
  {% set colspan = colspan + 1 %}
{% endif %}
{% if number_carriages %}
  {% set colspan = colspan + 1 %}
{% endif %}

{% if data %}
  <div class="table-responsive-md">
    <table id="lbthm" class="table table-bordered table-restriped responsive">
      <thead>
      <tr>
        <th>Departing</th>
        <th>Journey heat map</th>
        <th>Stops</th>
        <th>Arriving</th>
        <th>Duration</th>
        {% if available_seats %}
          <th>Available seats</th>
        {% endif %}
        {% if number_carriages %}
          <th>Number of carriages</th>
        {% endif %}
        <th>Journey load</th>
        <th>Details</th>
      </tr>
      </thead>
      <tbody>
      {% set counter = 0 %}
      {% for train_id, journey in data %}
        {% set counter = counter + 1 %}
        <tr class="heatmap-row {{ counter is odd ? 'odd' }}" id="train_row_{{ train_id }}">
          <td data-label="Departing" class="departure">{{ journey.journey_data.start.time.formatted }}</td>

          <td data-label="Journey heat map" class="journey-heatmap">
            {% include '@organisms/tm-lbt/row/row.twig' with {'stops': journey.stops} only %}
          </td>

          <td data-label="Stops" class="stops">{{ journey.stops|length - 1 }}</td>
          <td data-label="Arriving" class="arrival">{{ journey.journey_data.end.time.formatted }}</td>
          <td data-label="Duration" class="duration">{{ journey.journey_data.duration.formatted }}</td>

          {% if available_seats %}
            <td data-label="Available seats" class="available-seats">{{ journey.journey_data.start._a }}</td>
          {% endif %}

          {% if number_carriages %}
            <td data-label="Number of carriages" class="number-carriages">{{ journey.journey_data.start._n }}</td>
          {% endif %}

          <td data-label="Journey load" class="train-loading">
            {% include '@organisms/tm-lbt/loading/loading.twig' with {'loading': journey.journey_data.loading } only %}
          </td>

          <td>
            <!-- Collapse trigger -->
            {% set attr = create_attribute()
              .setAttribute('data-bs-toggle', 'collapse')
              .setAttribute('data-bs-target', "#lbtrc-#{ train_id }")
              .setAttribute('role', 'button')
              .setAttribute('tabindex', '0')
              .setAttribute('aria-expanded', 'false')
            %}
            {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
              "text": "Details",
              "attr": attr,
              "toggle": "sign",
              "url": "#",
              "class": "link-rd",
              "display": "noflex"
            } %}
            <!-- / Collapse trigger -->
          </td>
        </tr>

        <tr class="heatmap-row-expanded">
          <td></td>
          <td colspan="{{ colspan }}">
            <div class="collapse lbtrc" id="lbtrc-{{ train_id }}">
              {% include '@organisms/tm-lbt/row-expanded/row-expanded.twig' with {'stops': journey.stops, 'stations': stations } only %}
            </div>
          </td>
        </tr>

      {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  {{ elements.no_results|raw }}
{% endif %}

{% if heatmap_settings.key == 'below' %}
  {% include '@organisms/tm-lbt/lbt-key/lbt-key.twig' with {'heatmap_settings': heatmap_settings } only %}
{% endif %}
