{# LIBRARIES #}
{{ attach_library('ui_patterns/routes_cards.routes_cards_lib') }}

{# VARIABLES #}
{% set check_icon = global_icon_check|default('fal fa-check') %}
{% set button_status = button_status|default('default') %}
{% set button_class = button_class|default('buy-tickets-btn') %}
{% set submit_attributes = submit_attributes|default(create_attribute())
  .setAttribute("data-from-station", origin_crs)
  .setAttribute("data-to-station", destination_crs)
%}
{% set columns_desktop = columns_desktop|default(3) %}
{% set col_desktop_width = (12 / columns_desktop) %}
{% set col_class = 'mb-4 ' ~ 'col-md-' ~ col_desktop_width %}

{# TEMPLATE #}
<div class="route-cards">
  <div class="row">
    {% for route_data in routes_data %}
      {% set column_classes = create_attribute()
        .addClass(col_class)
      %}
      {% if loop.index > 4 %}
        {% set column_classes = column_classes.addClass('d-none') %}
        {% if loop.index < 7 %}
          {% set column_classes = column_classes.addClass('d-md-block') %}
        {% endif %}
      {% endif %}
      <div {{ column_classes }}>
        {% include '@molecules/tm-cards/destination-route-card/destination-route-card.twig' with {
          "title": route_data.title,
          "card_link": '#',
          "fare": route_data.fare,
          "time": route_data.time,
          "crs_origin": route_data.crs_origin,
          "crs_destination": route_data.crs_destination,
        } %}
      </div>
    {% endfor %}
  </div>
  {% if routes_data|length > 4 %}
    {% set button_classes = create_attribute()
      .addClass('show-more btn btn-outline-dark')
    %}
    {% if routes_data|length < 7 %}
      {% set button_classes = button_classes.addClass('d-md-none') %}
    {% endif %}
    <div class="text-center">
      <button {{ button_classes }}>More</button>
    </div>
  {% endif %}
</div>
