{{ attach_library('ui_patterns/route_info_grid.route_info_grid_lib') }}

{% set button_attributes = button_attributes|default(create_attribute())
  .setAttribute("data-from-station", origin_crs)
  .setAttribute("data-to-station", destination_crs)
%}
{% set button_status = button_status|default('default') %}
{% set odd_even = items|length % 2 ? 'even' : 'odd' %}

  <div class="row g-3">
    {% for item in items %}
      {% if item.key == 'prices_from' %}
        <div class="col-6 col-lg-4">
          <div class="route-info-price-item">
            <div class="route-info-price-content">
              <div class="route-info-price-text">
                <span class="price">{{ price_text }}</span>
                <span class="value">£{{ price }} {{ journey_type_text }}</span>
                {% if return_fare_text %}
                  <span class="note extra">{{ return_fare_text }}</span>
                {% endif %}
              </div>
              {% include '@atoms/form/button/button.twig' with {
                'text': button_text,
                'status': button_status,
                'class': 'buy-tickets-btn route-infobook-btn',
                'attributes': button_attributes
              } only %}

            </div>
          </div>
        </div>
      {% else %}
        <div class="col-6 col-lg-4">
          <div class="route-info-item">
            {% if item.image %}
              <span class="media-icon">
                {{ item.image }}
              </span>
            {% elseif item.icon and item.icon != '_none' %}
              {% set icons = item.icon|split('|') %}
              <span class="icons" aria-hidden="true">
                {% for icon in icons %}
                  <i class="fal {{ icon }}"></i>
                {% endfor %}
              </span>
            {% endif %}
            <div class="route-info-text-content">
              <span>{{ item.label }}</span>
              <span class="value">{{ item.value }}</span>
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>

