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

{# VARIABLES #}
{% set check_icon = global_icon_check|default('fal fa-check-square') %}
{% set submit_attributes = submit_attributes|default(create_attribute())
  .setAttribute("id", 'routes-booking-submit')
  .setAttribute("data-from-station", origin_crs)
  .setAttribute("data-to-station", destination_crs)
%}
{% set switch_attributes = switch_attributes|default(create_attribute())
  .setAttribute("id", 'routes-booking-switch')
%}

{# TEMPLATE #}
<div class="route-booking-block">
  <div class="top-section">
    <div class="price-block">
      <p class="buy-text">{{ price_text }}</p>
      <p class="fare">£{{ price }}</p>
      <p class="note">{{ journey_type_text }}</p>
    </div>
    <div class="from-to">
      <p class="place"><span class="type">From</span><span id="route-booking-from" class="text">{{ 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',
          'size': 'btn-sm',
          'attributes': switch_attributes
        } only %}
      </p>
      <p class="place"><span class="type">To</span><span id="route-booking-to" class="text">{{ 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': 'default',
      'class': 'buy-tickets-btn',
      'size': 'btn-lg',
      'attributes': submit_attributes
    } only %}
    </div>
  </div>
  {% if return_fare_text %}
    <p>{{ return_fare_text }}</p>
  {% endif %}
</div>
