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

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

<div class="tls-bkf-wrapper full 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="identity,search" data-max_autocomplete_results="8" 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="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="other" data-name="ORIGIN_STATION" id="from-buytlbf"
                   name="bookingFormFromStation" placeholder="Enter origin station" role="combobox" spellcheck="false" style=
                   "background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"
                   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 class="row">
      <div class="col-12">
        <div class="outward-datetime">
          <div class="one-way fr">
            <input class="oneway"  data-form-type="other" 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"  data-form-type="date" 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"   data-form-type="action,search" 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 chosen-select" data-width="100%" id="out_journey_indicator" name=
                "OUTBOUND_ARRIVAL_DEPARTURE_INDICATOR" title="Outbound arrival or departure">
                  <option selected value="Leave After">
                    Departing after
                  </option>
                  <option value="Arrive Before">
                    Arriving before
                  </option>
                </select>
              </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 chosen-select" data-width="100%" id="out-time" name="OUTBOUND_TIME">
                    <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>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12">
        <div class="return-datetime">
          <div class="open-return fr">
            <input class="openreturn"  data-form-type="other" 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"  data-form-type="date" 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"   data-form-type="other" 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 chosen-select" data-width="100%" id="ret_journey_indicator" name=
                "INBOUND_ARRIVAL_DEPARTURE_INDICATOR" title="Inbound arrival or departure">
                  <option selected value="Leave After">
                    Departing after
                  </option>
                  <option value="Arrive Before">
                    Arriving before
                  </option>
                </select>
              </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 chosen-select" data-width="100%" id="ret-time" name="INBOUND_TIME">
                    <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>
              </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 chosen-select" data-width="100%" id="adults" name="NUMBER_OF_ADULTS" 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>
      </div>
      <div class="col-6 last">
        <div class="form-group">
          <label class="adults-child" for="children">Children (5-15):</label><br>
          <select class="children chosen-select" data-width="100%" id="children" name="NUMBER_OF_CHILDREN" 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>
      </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">Find train times &amp; fares</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>

