{{ attach_library('ui_patterns/chk_serv.chk_serv_lib') }}

<div class="p-3" id="chk-serv-status">
  <form accept-charset="UTF-8" action="/" class="mb-0 stations-autocomplete journey_check_check_service_form form" data-dashlane-rid="a50f896355eee105" data-drupal-selector=
  "check-service-header-form-2" data-form-type="other" data-once="initiateIncidentForm" id="check-service-header-form--2" method="post" name="check-service-header-form--2" novalidate="novalidate">
    <div class="">
      <div class="mb-0">
        <input class="form-control" data-drupal-selector="edit-is-block" name="is_block" type="hidden" value="1"> <input class="form-control" data-drupal-selector="edit-jc-type" name="jc_type" type=
        "hidden" value="auto"> <input autocomplete="off" class="form-control" data-drupal-selector="form-xarlr2am4k-immvinjdtd8janpixhe-gb-bv7vvhfms" name="form_build_id" type="hidden" value=
        "form-XarLR2Am4K_iMMVinjDtD8JAnPiXHE-Gb_Bv7VVHfms"> <input class="form-control" data-drupal-selector="edit-check-service-header-form-form-token-2" name="form_token" type="hidden" value=
        "XQMB6Mtu7bbRFJiZwdVTpUQg7LyFNucrgb6W3BvDe-I"> <input class="form-control" data-drupal-selector="edit-check-service-header-form-2" name="form_id" type="hidden" value=
        "check_service_header_form">
        <div class="target_message" id="chk-serv-target-wrapper-238862">
          <div id="journey-check-check-service-results-block-5">
            <div class="" id="chk-srv-target-block-inner">
              <div class="alert alert-success">
                <div class="msgc">
                  <h2 class="h4 msgh">
                    <i class="fas fa-check-circle"></i> Good service between Glasgow Central and Paisley Canal
                  </h2>
                </div>
              </div>

              <div class="chk-serv-info">
                <span>At-a-glance service status for your regular journey.</span>
                <div class="chk-serv-reload">
                <span data-timestamp="1687781590">Last updated: 13:13</span>
                <a data-altcom-ajax-callback=
                                                                                                                                                  "journey_check_check_service_results_block" data-altcom-ajax-id="journey-check-check-service-results-block" data-altcom-ajax-params=
                                                                                                                                                  "eyJibG9ja19mcm9tIjoiZ2xjIiwiYmxvY2tfdG8iOiJwY24ifQ==" data-altcom-ajax-persist="1" data-altcom-ajax-target="chk-srv-target-block-inner" data-altcom-ajax-time="60" data-once=
                                                                                                                                                  "ajaxClickAdded ajaxAutoAdded ajaxRepeatAdded ajaxTrigger" href=
                                                                                                                                                  "/altcom-load-ajax/journey_check_check_service_results_block/eyJmb3JtX2lkIjoidGhpcyIsImZvcm1fdmFsdWVzIjp7ImlzX2Jsb2NrIjoiMSIsImpjX3R5cGUiOiJhdXRvIiwiZnJvbV9zdGF0aW9uIjoiR2xhc2dvdyBDZW50cmFsIFtHTENdIiwidG9fc3RhdGlvbiI6IlBhaXNsZXkgQ2FuYWwgW1BDTl0ifX0%3D#chk-srv-target-block-inner">

                  <i class="fas fa-sync-alt"></i> <span class="sr-only">Refresh</span></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mb-2">
        <div class="form-group-no-pad form-no-label label-invisible form-group js-form-item js-form-type-nre-stations-autocomplete js-form-item-from-station">
          <label class="visually-hidden js-form-required form-required" for="edit-from-station--2">From<span class="reqd">*</span> <span class="sr-only">Required form item</span></label>
          <div class="input-group">
            <div class="prefix input-group-text">
              From
            </div>
            <input aria-autocomplete="list" aria-controls="listbox_edit-from-station--2_container" aria-expanded="false" aria-owns="listbox_edit-from-station--2_container" aria-required="true"
                   autocomplete="off" class="form-text required nre-autocomplete ui-autocomplete-input form-control" data-dashlane-rid="8c44ace9ae552093" data-drupal-selector="edit-from-station"
                   data-form-type="other" data-msg-maxlength="From field has a maximum length of 255." data-msg-required="From field is required." id="edit-from-station--2" maxlength="255" name=
                   "from_station" placeholder="Enter origin station" required="required" role="combobox" size="60" tabindex="-1" type="text" value="">
          </div>

          <ul class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" id="listbox_edit-from-station--2_container" role="listbox" style="display: none;" tabindex="0">
          </ul>
        </div>
      </div>

      <div class="mb-2">
        <div class="form-group-no-pad form-no-label label-invisible form-group js-form-item js-form-type-nre-stations-autocomplete js-form-item-to-station">
          <label class="visually-hidden js-form-required form-required" for="edit-to-station--2">To<span class="reqd">*</span> <span class="sr-only">Required form item</span></label>
          <div class="input-group">
            <div class="prefix input-group-text">
              To
            </div>
            <input aria-autocomplete="list" aria-controls="listbox_edit-to-station--2_container" aria-expanded="false" aria-owns="listbox_edit-to-station--2_container" aria-required="true"
                   autocomplete="off" class="form-text required nre-autocomplete ui-autocomplete-input form-control" data-dashlane-rid="37839b8c0e15adc5" data-drupal-selector="edit-to-station"
                   data-form-type="other" data-msg-maxlength="To field has a maximum length of 255." data-msg-required="To field is required." id="edit-to-station--2" maxlength="255" name="to_station"
                   placeholder="Enter destination station" required="required" role="combobox" size="60" tabindex="-1" type="text" value="">
          </div>

          <ul class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" id="listbox_edit-to-station--2_container" role="listbox" style="display: none;" tabindex="0">
          </ul>
        </div>
      </div>

      <div class="">
        <button class="mb-0 mb-0 frc me-0 button js-form-submit form-submit btn btn-default btn-md" data-altcom-ajax-callback="journey_check_check_service_results_block" data-altcom-ajax-id=
        "journey-check-check-service-results-block" data-altcom-ajax-params="eyJmb3JtX2lkIjoidGhpcyJ9" data-altcom-ajax-persist="1" data-altcom-ajax-target="chk-serv-target-wrapper-238862"
                data-dashlane-label="true" data-dashlane-rid="0317529e8fb597d5" data-drupal-selector="edit-search" data-form-type="action" data-once="ajaxTrigger ajaxClickAdded ajaxAutoAdded ajaxRepeatAdded"
                data-processed="1" id="edit-search--2" name="op" tabindex="-1" type="submit" value="Submit">Submit <span class="spinner spinner-border spinner-border-sm text-light spin-hide" role=
          "status"><span class="sr-only">Loading...</span></span></button>
      </div>
    </div>
  </form>
</div>
