<div class="initially-visible-portion row">

  {# MESSAGES & ERRORS #}
  <div class="col-md-12">
    <div role="alert"
         aria-atomic="true"
         id="booking-form-errors-{{ el.id_suffix }}"
         class="messages alert alert-danger"
         aria-live="polite">
      <ul></ul>
    </div>
  </div>

  {# From group #}
  <div class="col-md-5 form-group-col">
    <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="mobile-only">:</span>
          <span class="sr-only">Required form item</span>
        </label>

        <input type="text"
               class="form-text form-control trainline-autocomplete ui-autocomplete-input 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">

        <div class="suffix input-group-text">
          <button type="button"
                  class="btn btn-outline-default btn-sm nearest-station"
                  aria-label="Find the nearest station to you">
            <i class="fas fa-map-marker-alt"></i>
          </button>
        </div>

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

  {# Swap Button #}
  <div class="col-md-1 swap-col">
    <button type="button" class="swap-stations btn btn-sm btn-icon a-pri mb-0">
      <i class="fas fa-exchange-alt fa-lg"></i><span class="sr-only">Swap From: and To: stations</span>
    </button>
  </div>

  {# To group #}
  <div class="col-md-5 form-group-col">
    <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="mobile-only">:</span>
          <span class="sr-only">Required form item</span>
        </label>

        <input type="text"
             class="form-text form-control trainline-autocomplete ui-autocomplete-input 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">

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

  {# Form toggle #}
  <div class="col-md-1" id="ihpct">
    <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="btn btn-sm btn-icon a-pri mb-0 bel belirf belian collapsed toggle">
      <span class="bell px-1">More</span>
      <i class="fas fa-chevron-down beli belir"></i>
      <i class="fas fa-chevron-up beli belir belih"></i>
    </button>
  </div>

</div>
