{{ attach_library('ui_patterns/bkf_widget_full.bkf_widget_lib') }}

<!---
<iframe
  src="https://{{ domain }}/tickets/widget/lite#domain=https://d9-dev-admin.greateranglia.co.uk|width=1484|id=ga-tickets-widget|height=276"
  scrolling="auto"
  style="position: relative; border: 0px; height: 100%; width: 100%; z-index: 2;">
</iframe>
--->

<div class="tls-bkf-wrapper lite container-fluid" id="desktop-ticket-booking-form">
  <form action="https://et2-buytickets-greateranglia.ttlnonprod.com/buytickets/datapassedin.aspx" class="trainline-booking-form bkf-widget validate-exclude ui-front m-0 p-0"
        data-form-type="search" data-max_autocomplete_results="2" data-mobilesearchurl="https://et2-m-greateranglia.ttlnonprod.com/search" data-mobileurl=
        "https://et2-m-greateranglia.ttlnonprod.com/DataPassedIn" method="post" novalidate="novalidate">
    <div class="buy-tickets-header row">
      <div class="col-12">
        <h1>{{ title }}</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div aria-atomic="true" aria-live="polite" class="messages alert alert-danger" id="booking-form-errors-tlbf" role="alert">
          <ul></ul>
        </div>
      </div>
    </div>
    <div class="station-inputs">
      <div class="row">
        <div class="col-12">
          <div class="form-group form-group-inline init-vis-form-group">
            <div class="input-group">
              <input aria-autocomplete="list" aria-controls="listbox_from-buytlbf_container" aria-expanded="false" aria-owns="listbox_from-buytlbf_container" autocomplete="off" class=
              "form-text form-control trainline-autocomplete ui-autocomplete-input from-station" data-form-type="query" data-name="ORIGIN_STATION" id=
                     "from-buytlbf" name="bookingFormFromStation" placeholder="Enter origin station" role="combobox" spellcheck="false" type="text">
              <div class="suffix input-group-text">
                <button aria-label="Find the nearest station to you" class="btn btn-outline-default btn-sm nearest-station"
                        data-form-type="action,search" type="button"><i class="fas fa-map-marker-alt"></i></button>
              </div>
            </div>
            <ul class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" id="listbox_from-buytlbf_container" role="listbox" style="display: none;" tabindex="0"></ul>
          </div>
        </div>
        <div class="col-12">
          <div class="form-group form-group-inline init-vis-form-group">
            <div class="input-group">
              <input aria-autocomplete="list" aria-controls="listbox_totlbf_container" aria-expanded="false" aria-owns="listbox_totlbf_container" autocomplete="off" class=
              "form-text form-control trainline-autocomplete ui-autocomplete-input to-station" data-form-type="query" data-name="DESTINATION_STATION" id="totlbf"
                     name="bookingFormToStation" placeholder="Enter destination station" role="combobox" spellcheck="false" type="text">
            </div>
            <ul class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" id="listbox_totlbf_container" role="listbox" style="display: none;" tabindex="0"></ul>
          </div>
        </div>
      </div>
    </div>
    <div class="other-inputs" style="display: none;">
      <div class="row">
        <div class="col-12">
          <div class="outward-datetime">
            <div class="one-way fr">
              <input class="oneway" id="onewaytlbf" name="one-way" type="checkbox" value="One way"> <label for="onewaytlbf">One way</label>
            </div>
            <div class="form-group">
              <label for="outdate">Out<span class="sr-only">ward journey date</span>:</label>
              <div class="input-group date add-on">
                <input autocomplete="off" class="datepicker form-control outdate hasDatepicker" id="outdate" name="OUTBOUND_DATE" placeholder="Outbound date (dd/mm/yyyy)" required="" title=
                "Enter your outbound date in dd/mm/yyyy format (or choose your date with the date picker to the right)" type="text" value="21/11/2022">
                <div class="suffix input-group-text">
                  <button class="btn btn-outline-default btn-sm" tabindex="-1" type="button"><i class="fas fa-calendar-alt"></i></button>
                </div>
              </div>
            </div>
            <div class="row time-row">
              <div class="col-6">
                <div class="form-group journey-type">
                  <label class="sr-only" for="out_journey_indicator">Outward journey type:</label> <select class="out_journey_indicator" data-width="100%" id="out_journey_indicator" name=
                  "OUTBOUND_ARRIVAL_DEPARTURE_INDICATOR" style="display: none;" title="Outbound arrival or departure">
                    <option selected value="Leave After">
                      Departing after
                    </option>
                    <option value="Arrive Before">
                      Arriving before
                    </option>
                  </select>
                  <div class="chosen-container chosen-container-single out_journey_indicator chosen-container-single-nosearch" id="out_journey_indicator_chosen" style="width: 100%;" title=
                  "Outbound arrival or departure">
                    <span class="chosen-single"><span>Departing after</span></span>
                    <div>
                      <b></b>
                    </div>
                    <div class="chosen-drop">
                      <div class="chosen-search">
                        <label class="visually-hidden" for="search_out_journey_indicator">Search for item</label> <input autocomplete="off" class="chosen-search-input" id=
                        "search_out_journey_indicator" name="search_out_journey_indicator" readonly type="text">
                      </div>
                      <ul class="chosen-results"></ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-6">
                <div class="form-group journey-time">
                  <label class="sr-only" for="out-time">Outward journey time:</label>
                  <div class="input-group">
                    <select class="time out-time" data-width="100%" id="out-time" name="OUTBOUND_TIME" style="display: none;">
                      <option value="00:00">
                        00:00
                      </option>
                      <option value="00:15">
                        00:15
                      </option>
                      <option value="00:30">
                        00:30
                      </option>
                      <option value="00:45">
                        00:45
                      </option>
                      <option value="01:00">
                        01:00
                      </option>
                      <option value="01:15">
                        01:15
                      </option>
                      <option value="01:30">
                        01:30
                      </option>
                      <option value="01:45">
                        01:45
                      </option>
                      <option value="02:00">
                        02:00
                      </option>
                      <option value="02:15">
                        02:15
                      </option>
                      <option value="02:30">
                        02:30
                      </option>
                      <option value="02:45">
                        02:45
                      </option>
                      <option value="03:00">
                        03:00
                      </option>
                      <option value="03:15">
                        03:15
                      </option>
                      <option value="03:30">
                        03:30
                      </option>
                      <option value="03:45">
                        03:45
                      </option>
                      <option value="04:00">
                        04:00
                      </option>
                      <option value="04:15">
                        04:15
                      </option>
                      <option value="04:30">
                        04:30
                      </option>
                      <option value="04:45">
                        04:45
                      </option>
                      <option value="05:00">
                        05:00
                      </option>
                      <option value="05:15">
                        05:15
                      </option>
                      <option value="05:30">
                        05:30
                      </option>
                      <option value="05:45">
                        05:45
                      </option>
                      <option value="06:00">
                        06:00
                      </option>
                      <option value="06:15">
                        06:15
                      </option>
                      <option value="06:30">
                        06:30
                      </option>
                      <option value="06:45">
                        06:45
                      </option>
                      <option value="07:00">
                        07:00
                      </option>
                      <option value="07:15">
                        07:15
                      </option>
                      <option value="07:30">
                        07:30
                      </option>
                      <option value="07:45">
                        07:45
                      </option>
                      <option value="08:00">
                        08:00
                      </option>
                      <option value="08:15">
                        08:15
                      </option>
                      <option value="08:30">
                        08:30
                      </option>
                      <option value="08:45">
                        08:45
                      </option>
                      <option value="09:00">
                        09:00
                      </option>
                      <option value="09:15">
                        09:15
                      </option>
                      <option value="09:30">
                        09:30
                      </option>
                      <option value="09:45">
                        09:45
                      </option>
                      <option value="10:00">
                        10:00
                      </option>
                      <option value="10:15">
                        10:15
                      </option>
                      <option value="10:30">
                        10:30
                      </option>
                      <option value="10:45">
                        10:45
                      </option>
                      <option value="11:00">
                        11:00
                      </option>
                      <option value="11:15">
                        11:15
                      </option>
                      <option value="11:30">
                        11:30
                      </option>
                      <option selected value="11:45">
                        11:45
                      </option>
                      <option value="12:00">
                        12:00
                      </option>
                      <option value="12:15">
                        12:15
                      </option>
                      <option value="12:30">
                        12:30
                      </option>
                      <option value="12:45">
                        12:45
                      </option>
                      <option value="13:00">
                        13:00
                      </option>
                      <option value="13:15">
                        13:15
                      </option>
                      <option value="13:30">
                        13:30
                      </option>
                      <option value="13:45">
                        13:45
                      </option>
                      <option value="14:00">
                        14:00
                      </option>
                      <option value="14:15">
                        14:15
                      </option>
                      <option value="14:30">
                        14:30
                      </option>
                      <option value="14:45">
                        14:45
                      </option>
                      <option value="15:00">
                        15:00
                      </option>
                      <option value="15:15">
                        15:15
                      </option>
                      <option value="15:30">
                        15:30
                      </option>
                      <option value="15:45">
                        15:45
                      </option>
                      <option value="16:00">
                        16:00
                      </option>
                      <option value="16:15">
                        16:15
                      </option>
                      <option value="16:30">
                        16:30
                      </option>
                      <option value="16:45">
                        16:45
                      </option>
                      <option value="17:00">
                        17:00
                      </option>
                      <option value="17:15">
                        17:15
                      </option>
                      <option value="17:30">
                        17:30
                      </option>
                      <option value="17:45">
                        17:45
                      </option>
                      <option value="18:00">
                        18:00
                      </option>
                      <option value="18:15">
                        18:15
                      </option>
                      <option value="18:30">
                        18:30
                      </option>
                      <option value="18:45">
                        18:45
                      </option>
                      <option value="19:00">
                        19:00
                      </option>
                      <option value="19:15">
                        19:15
                      </option>
                      <option value="19:30">
                        19:30
                      </option>
                      <option value="19:45">
                        19:45
                      </option>
                      <option value="20:00">
                        20:00
                      </option>
                      <option value="20:15">
                        20:15
                      </option>
                      <option value="20:30">
                        20:30
                      </option>
                      <option value="20:45">
                        20:45
                      </option>
                      <option value="21:00">
                        21:00
                      </option>
                      <option value="21:15">
                        21:15
                      </option>
                      <option value="21:30">
                        21:30
                      </option>
                      <option value="21:45">
                        21:45
                      </option>
                      <option value="22:00">
                        22:00
                      </option>
                      <option value="22:15">
                        22:15
                      </option>
                      <option value="22:30">
                        22:30
                      </option>
                      <option value="22:45">
                        22:45
                      </option>
                      <option value="23:00">
                        23:00
                      </option>
                      <option value="23:15">
                        23:15
                      </option>
                      <option value="23:30">
                        23:30
                      </option>
                      <option value="23:45">
                        23:45
                      </option>
                    </select>
                    <div class="chosen-container chosen-container-single chosen-container-single-nosearch" id="out_time_chosen" style="width: 100%;" title="">
                      <span class="chosen-single"><span>12:00</span></span>
                      <div>
                        <b></b>
                      </div>
                      <div class="chosen-drop">
                        <div class="chosen-search">
                          <label class="visually-hidden" for="search_out-time">Search for item</label> <input autocomplete="off" class="chosen-search-input" id="search_out-time" name=
                          "search_out-time" readonly type="text">
                        </div>
                        <ul class="chosen-results"></ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="return-datetime">
            <div class="open-return fr">
              <input class="openreturn" id="openreturntlbf" name="open-return" type="checkbox" value="Open return"> <label for="openreturntlbf">Open return</label>
            </div>
            <div class="form-group">
              <label for="retdate">Return <span class="sr-only">journey date</span>:</label>
              <div class="input-group date add-on">
                <input autocomplete="off" class="datepicker form-control retdate hasDatepicker" id="retdate" name="INBOUND_DATE" placeholder="Return date (dd/mm/yyyy)" title=
                "Enter your return date in dd/mm/yyyy format (or choose your date with the date picker to the right)" type="text">
                <div class="suffix input-group-text">
                  <button class="btn btn-outline-default btn-sm retdate" tabindex="-1" type="button"><i class="fas fa-calendar-alt"></i></button>
                </div>
              </div>
            </div>
            <div class="row time-row">
              <div class="col-6">
                <div class="form-group journey-type">
                  <label class="sr-only" for="ret_journey_indicator">Return journey type:</label> <select class="ret_journey_indicator" data-width="100%" id="ret_journey_indicator" name=
                  "INBOUND_ARRIVAL_DEPARTURE_INDICATOR" style="display: none;" title="Inbound arrival or departure">
                    <option selected value="Leave After">
                      Departing after
                    </option>
                    <option value="Arrive Before">
                      Arriving before
                    </option>
                  </select>
                  <div class="chosen-container chosen-container-single ret_journey_indicator chosen-container-single-nosearch" id="ret_journey_indicator_chosen" style="width: 100%;" title=
                  "Inbound arrival or departure">
                    <span class="chosen-single"><span>Departing after</span></span>
                    <div>
                      <b></b>
                    </div>
                    <div class="chosen-drop">
                      <div class="chosen-search">
                        <label class="visually-hidden" for="search_ret_journey_indicator">Search for item</label> <input autocomplete="off" class="chosen-search-input" id=
                        "search_ret_journey_indicator" name="search_ret_journey_indicator" readonly type="text">
                      </div>
                      <ul class="chosen-results"></ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-6">
                <div class="form-group journey-time">
                  <label class="sr-only" for="ret-time">Return journey time:</label>
                  <div class="input-group add-on time">
                    <select class="time ret-time" data-width="100%" id="ret-time" name="INBOUND_TIME" style="display: none;">
                      <option value="00:00">
                        00:00
                      </option>
                      <option value="00:15">
                        00:15
                      </option>
                      <option value="00:30">
                        00:30
                      </option>
                      <option value="00:45">
                        00:45
                      </option>
                      <option value="01:00">
                        01:00
                      </option>
                      <option value="01:15">
                        01:15
                      </option>
                      <option value="01:30">
                        01:30
                      </option>
                      <option value="01:45">
                        01:45
                      </option>
                      <option value="02:00">
                        02:00
                      </option>
                      <option value="02:15">
                        02:15
                      </option>
                      <option value="02:30">
                        02:30
                      </option>
                      <option value="02:45">
                        02:45
                      </option>
                      <option value="03:00">
                        03:00
                      </option>
                      <option value="03:15">
                        03:15
                      </option>
                      <option value="03:30">
                        03:30
                      </option>
                      <option value="03:45">
                        03:45
                      </option>
                      <option value="04:00">
                        04:00
                      </option>
                      <option value="04:15">
                        04:15
                      </option>
                      <option value="04:30">
                        04:30
                      </option>
                      <option value="04:45">
                        04:45
                      </option>
                      <option value="05:00">
                        05:00
                      </option>
                      <option value="05:15">
                        05:15
                      </option>
                      <option value="05:30">
                        05:30
                      </option>
                      <option value="05:45">
                        05:45
                      </option>
                      <option value="06:00">
                        06:00
                      </option>
                      <option value="06:15">
                        06:15
                      </option>
                      <option value="06:30">
                        06:30
                      </option>
                      <option value="06:45">
                        06:45
                      </option>
                      <option value="07:00">
                        07:00
                      </option>
                      <option value="07:15">
                        07:15
                      </option>
                      <option value="07:30">
                        07:30
                      </option>
                      <option value="07:45">
                        07:45
                      </option>
                      <option value="08:00">
                        08:00
                      </option>
                      <option value="08:15">
                        08:15
                      </option>
                      <option value="08:30">
                        08:30
                      </option>
                      <option value="08:45">
                        08:45
                      </option>
                      <option value="09:00">
                        09:00
                      </option>
                      <option value="09:15">
                        09:15
                      </option>
                      <option value="09:30">
                        09:30
                      </option>
                      <option value="09:45">
                        09:45
                      </option>
                      <option value="10:00">
                        10:00
                      </option>
                      <option value="10:15">
                        10:15
                      </option>
                      <option value="10:30">
                        10:30
                      </option>
                      <option value="10:45">
                        10:45
                      </option>
                      <option value="11:00">
                        11:00
                      </option>
                      <option value="11:15">
                        11:15
                      </option>
                      <option value="11:30">
                        11:30
                      </option>
                      <option value="11:45">
                        11:45
                      </option>
                      <option value="12:00">
                        12:00
                      </option>
                      <option value="12:15">
                        12:15
                      </option>
                      <option value="12:30">
                        12:30
                      </option>
                      <option selected value="12:45">
                        12:45
                      </option>
                      <option value="13:00">
                        13:00
                      </option>
                      <option value="13:15">
                        13:15
                      </option>
                      <option value="13:30">
                        13:30
                      </option>
                      <option value="13:45">
                        13:45
                      </option>
                      <option value="14:00">
                        14:00
                      </option>
                      <option value="14:15">
                        14:15
                      </option>
                      <option value="14:30">
                        14:30
                      </option>
                      <option value="14:45">
                        14:45
                      </option>
                      <option value="15:00">
                        15:00
                      </option>
                      <option value="15:15">
                        15:15
                      </option>
                      <option value="15:30">
                        15:30
                      </option>
                      <option value="15:45">
                        15:45
                      </option>
                      <option value="16:00">
                        16:00
                      </option>
                      <option value="16:15">
                        16:15
                      </option>
                      <option value="16:30">
                        16:30
                      </option>
                      <option value="16:45">
                        16:45
                      </option>
                      <option value="17:00">
                        17:00
                      </option>
                      <option value="17:15">
                        17:15
                      </option>
                      <option value="17:30">
                        17:30
                      </option>
                      <option value="17:45">
                        17:45
                      </option>
                      <option value="18:00">
                        18:00
                      </option>
                      <option value="18:15">
                        18:15
                      </option>
                      <option value="18:30">
                        18:30
                      </option>
                      <option value="18:45">
                        18:45
                      </option>
                      <option value="19:00">
                        19:00
                      </option>
                      <option value="19:15">
                        19:15
                      </option>
                      <option value="19:30">
                        19:30
                      </option>
                      <option value="19:45">
                        19:45
                      </option>
                      <option value="20:00">
                        20:00
                      </option>
                      <option value="20:15">
                        20:15
                      </option>
                      <option value="20:30">
                        20:30
                      </option>
                      <option value="20:45">
                        20:45
                      </option>
                      <option value="21:00">
                        21:00
                      </option>
                      <option value="21:15">
                        21:15
                      </option>
                      <option value="21:30">
                        21:30
                      </option>
                      <option value="21:45">
                        21:45
                      </option>
                      <option value="22:00">
                        22:00
                      </option>
                      <option value="22:15">
                        22:15
                      </option>
                      <option value="22:30">
                        22:30
                      </option>
                      <option value="22:45">
                        22:45
                      </option>
                      <option value="23:00">
                        23:00
                      </option>
                      <option value="23:15">
                        23:15
                      </option>
                      <option value="23:30">
                        23:30
                      </option>
                      <option value="23:45">
                        23:45
                      </option>
                    </select>
                    <div class="chosen-container chosen-container-single chosen-container-single-nosearch" id="ret_time_chosen" style="width: 100%;" title="">
                      <span class="chosen-single"><span>13:00</span></span>
                      <div>
                        <b></b>
                      </div>
                      <div class="chosen-drop">
                        <div class="chosen-search">
                          <label class="visually-hidden" for="search_ret-time">Search for item</label> <input autocomplete="off" class="chosen-search-input" id="search_ret-time" name=
                          "search_ret-time" readonly type="text">
                        </div>
                        <ul class="chosen-results"></ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="form-group">
            <label class="adults-child" for="adults">Adults:</label><br>
            <select class="adults" data-width="100%" id="adults" name="NUMBER_OF_ADULTS" style="display: none;" title="Number of adults travelling">
              <option value="0">
                0 Adults
              </option>
              <option selected value="1">
                1 Adult
              </option>
              <option value="2">
                2 Adults
              </option>
              <option value="3">
                3 Adults
              </option>
              <option value="4">
                4 Adults
              </option>
              <option value="5">
                5 Adults
              </option>
              <option value="6">
                6 Adults
              </option>
              <option value="7">
                7 Adults
              </option>
              <option value="8">
                8 Adults
              </option>
              <option value="9">
                9 Adults
              </option>
              <option value="10">
                10 Adults
              </option>
            </select>
            <div class="chosen-container chosen-container-single adults chosen-container-single-nosearch" id="adults_chosen" style="width: 100%;" title="Number of adults travelling">
              <span class="chosen-single"><span>1 Adult</span></span>
              <div>
                <b></b>
              </div>
              <div class="chosen-drop">
                <div class="chosen-search">
                  <label class="visually-hidden" for="search_adults">Search for item</label> <input autocomplete="off" class="chosen-search-input" id="search_adults" name="search_adults" readonly
                                                                                                    type="text">
                </div>
                <ul class="chosen-results"></ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-6 last">
          <div class="form-group">
            <label class="adults-child" for="children">Children (5-15):</label><br>
            <select class="children" data-width="100%" id="children" name="NUMBER_OF_CHILDREN" style="display: none;" title="Number of children travelling">
              <option selected value="0">
                0 Children
              </option>
              <option value="1">
                1 Child
              </option>
              <option value="2">
                2 Children
              </option>
              <option value="3">
                3 Children
              </option>
              <option value="4">
                4 Children
              </option>
              <option value="5">
                5 Children
              </option>
              <option value="6">
                6 Children
              </option>
              <option value="7">
                7 Children
              </option>
              <option value="8">
                8 Children
              </option>
              <option value="9">
                9 Children
              </option>
              <option value="10">
                10 Children
              </option>
            </select>
            <div class="chosen-container chosen-container-single children chosen-container-single-nosearch" id="children_chosen" style="width: 100%;" title="Number of children travelling">
              <span class="chosen-single"><span>0 Children</span></span>
              <div>
                <b></b>
              </div>
              <div class="chosen-drop">
                <div class="chosen-search">
                  <label class="visually-hidden" for="search_children">Search for item</label> <input autocomplete="off" class="chosen-search-input" id="search_children" name="search_children"
                                                                                                      readonly type="text">
                </div>
                <ul class="chosen-results"></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <button class="btn {{ button_type }} w-100 submit"  data-form-type="action,search" name="submit" title="Find train times"
                type="submit">Next</button>
      </div>
    </div>
    <div class="bkf-ft-texts row">
      <div class="col-6 bkf-ft-text">
        <span><i class="fas fa-ticket-alt"></i> UK Tickets</span>
      </div>
      <div class="col-6 bkf-ft-text">
        <span><i class="fas fa-check"></i> Price Promised</span>
      </div>
      <div class="col-6 bkf-ft-text">
        <span><i class="fas fa-mobile-alt"></i> Mobile Tickets</span>
      </div>
      <div class="col-6 bkf-ft-text">
        <span><i class="fas fa-pound-sign"></i> No Fees</span>
      </div>
    </div>
    <div class="buy-tickets-foot">
      <a href="https://{{ domain }}"><img alt="Powered by TOC" src="/images/{{ image_file }}" typeof="foaf:Image"></a>
    </div>
  </form>
</div>
