{# LIBRARIES #}
{{ attach_library('ui_patterns/flexipass_check_form.flexipass_check_form_lib') }}

{# TEMPLATE #}
<div class="flexipass-check-form p-3">
  <h2>{% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
    "text": "Flexipass check",
    "icon_left": "fas fa-ticket-alt rot-135"
    } only %}</h2>
  <div class="flexipass-check-top mt-3 mb-4">
    <div class="origin-destination">
      {{ origin_station }}
      {{ swap_stations }}
      {{ destination_station }}
    </div>
    {# Display the reset button. #}
    <div class="reset-button">{{ reset }}</div>
  </div>
  {# Display the result message and the submit button. #}
  <div class="flexipass-check-result" id="{{ results_id }}">
    <div class="row message-container">
      {% if alert_text %}
        <div class="col-sm-12 col-md-8">
          <h2 class="h3">{{ alert_text }}</h2>
        </div>
      {% endif %}
      <div class="col-sm-12 col-md-4 text-md-end">
      {# Completely rebuild the submit button so it passes data to the ajax. #}
      {% set spinner %}
        {% include "@molecules/tm-bs/spinner/spinner.twig" with {
          'ajax': true
        } only %}
      {% endset %}
      {{ altcom_ajax_button(
        submit_text ~ ' ' ~ spinner,
        ajax_callback,
        ajax_id,
        {
          'form_id': 'this',
          'block_id': 'embedded_flexipasscheckformblock',
          'cache_tag': 'config:flexipass_check.settings',
          'label': submit_text,
          'callback': ajax_callback,
          'ajax_id': ajax_id
        })
      }}
      </div>
    </div>
  </div>
</div>
