{{ attach_library('ui_patterns/fare_comparator.fare_comparator_lib') }}

<form action="" method="get" id="fare-comparator-front-form" accept-charset="UTF-8" class="form" data-once="cvJqueryValidate" novalidate="novalidate">
  <div class="fare-comparator-form">
    <div class="fare-comparator-top">
      <h2 class="header">Find the best value ticket for your commute</h2>
      <p>Easily compare ticket prices based on your journey</p>
      <div class="fare-comparator-fields-top">
        <div class="stations-autocomplete form-no-label label-invisible form-group js-form-item js-form-type-nre-stations-autocomplete js-form-item-from-station">
          <label for="edit-from-station--2" class="visually-hidden">From</label>
          <input placeholder="Leaving from" data-drupal-selector="edit-from-station" data-msg-maxlength="From field has a maximum length of 255." data-rule-storage_autocomplete=".+\s\[([A-Z]{3}|[0-9]{1,3})\]" data-msg-storage_autocomplete="Please use the autocomplete dropdown to select the &quot;From&quot; field." type="text" id="edit-from-station--2" name="from_station" value="" size="60" maxlength="255" class="form-text ui-autocomplete-input form-control nre-autocomplete" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="listbox_edit-from-station--2_container" aria-owns="listbox_edit-from-station--2_container">
        </div>
        <div class="stations-autocomplete form-no-label label-invisible form-group js-form-item js-form-type-nre-stations-autocomplete js-form-item-to-station">
          <label for="edit-to-station--2" class="visually-hidden">To</label>
          <input placeholder="Going to" data-drupal-selector="edit-to-station" data-msg-maxlength="To field has a maximum length of 255." data-rule-storage_autocomplete=".+\s\[([A-Z]{3}|[0-9]{1,3})\]" data-msg-storage_autocomplete="Please use the autocomplete dropdown to select the &quot;To&quot; field." type="text" id="edit-to-station--2" name="to_station" value="" size="60" maxlength="255" class="form-text ui-autocomplete-input form-control nre-autocomplete" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="listbox_edit-to-station--2_container" aria-owns="listbox_edit-to-station--2_container">
        </div>
        <div class="date-field">
          <div id="edit-start-date" class="form-group-date">
            <div class="form-no-label label-invisible form-group js-form-item js-form-type-date js-form-item-start-date-date">
              <label for="edit-start-date-date" class="visually-hidden js-form-required form-required">Date</label>
              <input data-drupal-selector="edit-start-date-date" type="date" data-msg-required="Date field is required." id="edit-start-date-date" name="start_date[date]" value="" size="12" class="form-date required form-control" required="required" aria-required="true">
            </div>
          </div>
          <button class="trigger-calendar btn btn-sm btn-light">Start date</button>
        </div>
      </div>
      <div class="fare-comparator-days">
        <fieldset data-drupal-selector="edit-days-a-week" data-msg-required="How many days a week do you usually travel by train? field is required." id="edit-days-a-week--wrapper" class="fieldgroup form-composite required js-form-wrapper" required="required" aria-required="true">
          <legend>
            <span class="fieldset-legend legend-title js-form-required form-required">How many days a week do you usually travel by train?</span>
          </legend>
          <div class="fieldset-wrapper">
            <div id="edit-days-a-week" class="form-radios">
              <div class="form-group js-form-item js-form-type-radio js-form-item-days-a-week">
                <input data-drupal-selector="edit-days-a-week-1" type="radio" id="edit-days-a-week-1" name="days_a_week" value="1" class="form-radio">
                <label for="edit-days-a-week-1" class="option">1</label>
              </div>
              <div class="form-group js-form-item js-form-type-radio js-form-item-days-a-week">
                <input data-drupal-selector="edit-days-a-week-2" type="radio" id="edit-days-a-week-2" name="days_a_week" value="2" class="form-radio">
                <label for="edit-days-a-week-2" class="option">2</label>
              </div>
              <div class="form-group js-form-item js-form-type-radio js-form-item-days-a-week">
                <input data-drupal-selector="edit-days-a-week-3" type="radio" id="edit-days-a-week-3" name="days_a_week" value="3" class="form-radio">
                <label for="edit-days-a-week-3" class="option">3</label>
              </div>
              <div class="form-group js-form-item js-form-type-radio js-form-item-days-a-week">
                <input data-drupal-selector="edit-days-a-week-4" type="radio" id="edit-days-a-week-4" name="days_a_week" value="4" class="form-radio">
                <label for="edit-days-a-week-4" class="option">4</label>
              </div>
              <div class="form-group js-form-item js-form-type-radio js-form-item-days-a-week">
                <input data-drupal-selector="edit-days-a-week-5" type="radio" id="edit-days-a-week-5" name="days_a_week" value="5" class="form-radio">
                <label for="edit-days-a-week-5" class="option">5</label>
              </div>
              <div class="form-group js-form-item js-form-type-radio js-form-item-days-a-week">
                <input data-drupal-selector="edit-days-a-week-6" type="radio" id="edit-days-a-week-6" name="days_a_week" value="6" class="form-radio">
                <label for="edit-days-a-week-6" class="option">6</label>
              </div>
              <div class="form-group js-form-item js-form-type-radio js-form-item-days-a-week">
                <input data-drupal-selector="edit-days-a-week-7" type="radio" id="edit-days-a-week-7" name="days_a_week" value="7" class="form-radio">
                <label for="edit-days-a-week-7" class="option">7</label>
              </div>
            </div>
          </div>
        </fieldset>
      </div>
      <button data-ajax-http-method="GET" class="w-100 button js-form-submit form-submit btn btn-default btn-md form-disabled" data-drupal-selector="fare-comparator-submit" type="submit" id="fare-comparator-submit" value="Show my ticket options" disabled="">Show my ticket options</button>
    </div>
    <div class="fare-comparator-results">
      <div id="fare-comparator-results">
        <h3 class="results-header">Your Estimated Ticket Prices</h3>
        <figure class=" table-responsive-md">
          <table class="table">
            <thead>
            <tr><th>
                Ticket Type
              </th>
              <th>
                Total Price
              </th>
              <th>
                Daily Cost
              </th>
              <th>
                Notes
              </th>
              <th></th>
            </tr></thead>

            <tbody>
            <tr>
              <td>
                Weekly Season
              </td>
              <td>
                £20
              </td>
              <td>
                £6.67
              </td>
              <td>
                Unlimited use
              </td>
              <td>
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-open-return="true" data-outdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="e17edc0225bbed77" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-season="true" data-startdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="5963962480a9707b" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td>
                Monthly Season
              </td>
              <td>
                £76.80
              </td>
              <td>
                £5.91
              </td>
              <td>
                Est. 30 days
              </td>
              <td>
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-open-return="true" data-outdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="e17edc0225bbed77" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-season="true" data-startdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="4faefc8350d30030" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td>
                Annual Season
              </td>
              <td>
                £800
              </td>
              <td>
                £5.13
              </td>
              <td>
                Est. 360 days
              </td>
              <td>
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-open-return="true" data-outdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="e17edc0225bbed77" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-season="true" data-startdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="d35aa9c22bbf7bfb" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td>
                Flexipass (12 trips)
              </td>
              <td>
                £31.50
              </td>
              <td>
                £5.25
              </td>
              <td>
                Use in 60 days
              </td>
              <td>
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-open-return="true" data-outdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="e17edc0225bbed77" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-flexipass="true" data-startdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="bbf41edbc746f79a" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td>
                Anytime Return x3
              </td>
              <td>
                £14.10
              </td>
              <td>
                £4.70
              </td>
              <td>

              </td>
              <td>
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-open-return="true" data-outdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="e17edc0225bbed77" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <button class="btn btn-sm btn-primary buy-tickets-btn button js-form-submit form-submit btn btn-default btn-md" data-to-station="IRV" data-from-station="ASB" data-open-return="true" data-outdate="31/07/2025" type="submit" name="op" value="Buy tickets" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="e17edc0225bbed77" data-dashlane-classification="action,next">
                  Buy tickets
                </button>
              </td>
            </tr>
            </tbody>

          </table>
        </figure>
        <ul>
          <li>Prices shown are valid from your selected travel date</li>
          <li>Season ticket prices will change on 28 September</li>
          <li>Lockerbie, Dunbar and Reston are not included in this widget</li>
        </ul>
      </div>
    </div>
    <div class="error-messages-wrapper js-form-wrapper form-wrapper" data-drupal-selector="edit-rs-error-messages" id="edit-rs-error-messages"></div>
    <input data-drupal-selector="edit-with-cta" type="hidden" name="with_cta" value="1" class="form-control">
  </div>
</form>
