{#
/**
 * @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') }}

<div class="js-form-trigger-wrapper d-flex gap-3 p-3 pe-0" tabindex="0">

  {# From group #}
  <div class="form-group-col flex-grow-1">
    <div class="form-group form-group-inline form-group-no-pad init-vis-form-group">
      <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 init-vis-form-group">
      <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>

  {# 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-0 pe-1 bel belirf belian"
          tabindex="-1">
    <span class="bell px-1">More</span>
    <i class="fas fa-plus beli belir"></i>
  </button>

</div>

