{# LIBRARIES #}
{{ attach_library('ui_patterns/routes_booking_form_block.routes_booking_form_block_lib') }}

{# VARIABLES #}
{% set check_icon = check_icon|default('fal fa-check-square') %}
{% 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)
%}

{# TEMPLATE #}
<div class="route-booking-block"{% if hidden %} style="display: none;"{% endif %}>
  <div class="top-section">
    <div class="price-block {% if fare_mobile_small %}mobile{% endif %}">
      {% if no_fares_available %}
        <p class="buy-text">{{ no_fares_available }}</p>
      {% else %}
        <p class="buy-text">{{ price_text }}</p>
        <p class="fare">£{{ price }}</p>
        <p class="note">{{ journey_type_text }}</p>
      {% endif %}
    </div>
    <div class="from-to">
      <p class="place"><span class="type">From</span><span class="text route-booking-from">{{ origin_name }}</span>
        {% include '@atoms/form/button/button.twig' with {
          'text': '<i class="fas fa-exchange"></i>',
          'value': '',
          'status': 'default',
          'icon_position': 'left',
          'class': 'switch-places routes-booking-switch',
          'size': 'btn-sm',
        } only %}
      </p>
      <p class="place"><span class="type">To</span><span class="text route-booking-to">{{ destination_name }}</span></p>
    </div>
  </div>
  <div class="bottom-section">
    <div class="message">
      <span><i class="{{ check_icon }}"></i> {{ booking_fees_message }}</span>
    </div>
    <div class="button">
    {% include '@atoms/form/button/button.twig' with {
      'text': button_text,
      'value': '',
      'status': button_status,
      'class': button_class,
      'size': 'btn-lg',
      'attributes': submit_attributes
    } only %}
    </div>
  </div>
  {% if return_fare_text %}
    <p>{{ return_fare_text }}</p>
  {% endif %}
</div>
