{#
/**
 * @file
 * Block template from where to load the modals.
 *
 * See AltcomAjax::altcomAjaxAttrsString() for explanantion of vars.
 *
 * Available variables:
 * - element - The raw element containing data.
 *    - path - Current path where the block is displayed.
 */
#}
{{ attach_library('ui_patterns/tm_js_form_trigger.tm_js_form_trigger_lib') }}
{% if wrapper_classes %}
<div class="{{ wrapper_classes }}">
{% endif %}
<div class="js-form-trigger-wrapper d-flex flex-column flex-md-row p-3 pb-1 pb-md-3" tabindex="0">

  {# From group #}
  <div class="form-group-col flex-grow-1">
    <div class="form-group form-group-inline form-group-no-pad">
      <div class="input-group">

        <label for="from-buy{{ el.id_suffix }}" class="form-required prefix input-group-text">
          From
          <span class="sr-only">Required form item</span>
        </label>

        <input type="text"
               class="form-text form-control from-station"
               id="from-buy{{ el.id_suffix }}" placeholder="Enter origin station"
               autocomplete="off" data-name="ORIGIN_STATION" spellcheck="false"
               aria-controls="listbox_from{{ el.id_suffix }}_container"
               aria-owns="listbox_from{{ el.id_suffix }}_container"
               aria-autocomplete="list" role="combobox"
               aria-expanded="false" tabindex="-1">

      </div>
    </div>
  </div>

  {# To group #}
  <div class="form-group-col flex-grow-1">
    <div class="form-group form-group-inline form-group-no-pad">
      <div class="input-group">

        <label for="to{{ el.id_suffix }}" class="form-required prefix input-group-text">
          To
          <span class="sr-only">Required form item</span>
        </label>

        <input type="text"
               class="form-text form-control to-station"
               id="to{{ el.id_suffix }}" placeholder="Enter destination station"
               autocomplete="off" data-name="DESTINATION_STATION" spellcheck="false"
               aria-controls="listbox_to{{ el.id_suffix }}_container"
               aria-owns="listbox_to{{ el.id_suffix }}_container"
               aria-autocomplete="list" role="combobox"
               aria-expanded="false" tabindex="-1">

      </div>
    </div>
  </div>

  <div class="js-button-wrapper d-flex">
    {# Form toggle #}
    <button type="button"
            href="#tls-bkf-{{ el.id_suffix }}"
            data-bs-toggle="collapse"
            data-bs-target="#tls-bkf-{{ el.id_suffix }}"
            aria-expanded="false"
            title="Expand booking form"
            role="button"
            id="act-a"
            class="more btn btn-sm btn-icon a-pri mb-0 me-0 ps-md-0 pe-md-1 bel belirf belian"
            tabindex="-1">
      <span class="bell px-1">More</span>
      <i class="fas fa-plus beli belir"></i>
    </button>
  </div>
</div>
{% if wrapper_classes %}
</div>
{% endif %}
