{# LIBRARIES #}
{{ attach_library('ui_patterns/journey_smart_tabs.journey_smart_tabs_lib') }}

{# TEMPLATE #}
<form class="journey-smart-live-times-tabs-form form_google_analytics_tracking form"
      data-drupal-selector="journey-smart-live-times-tabs-form" action=""
      method="get" id="journey-smart-live-times-tabs-form"
      accept-charset="UTF-8"
      data-once="cvJqueryValidate formGoogleAnalyticsTrackingBehaviour form-updated"
      novalidate="novalidate" data-dashlane-rid="a8460fc1b74dac9f"
      data-dashlane-classification="other"
      data-drupal-form-fields="edit-station,edit-callingat">
    <div class="js-lt-tabs">
        <fieldset data-drupal-selector="edit-orientation"
                  id="edit-orientation--wrapper"
                  class="fieldgroup form-composite js-form-wrapper">
            <legend>
                <span class="fieldset-legend legend-title">Orientation</span>
            </legend>
            <div class="fieldset-wrapper">
                <div id="edit-orientation" class="form-radios">
                    <div class="form-group js-form-item js-form-type-radio js-form-item-orientation">
                        <input data-drupal-selector="edit-orientation-departures"
                               type="radio" id="edit-orientation-departures"
                               name="orientation" value="departures"
                               class="form-radio">
                        <label for="edit-orientation-departures" class="option">
                            Departures</label>
                    </div>
                    <div class="form-group js-form-item js-form-type-radio js-form-item-orientation">
                        <input data-drupal-selector="edit-orientation-arrivals"
                               type="radio" id="edit-orientation-arrivals"
                               name="orientation" value="arrivals"
                               class="form-radio">
                        <label for="edit-orientation-arrivals" class="option">
                            Arrivals</label>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
    <div class="js-lt-fields">
        <div class="field">
            {{ station }}
            <button class="btn btn-outline-default clear-field border-0">
                <i class="fas fa-times"></i><span
                        class="sr-only">Clear field</span>
            </button>
        </div>
        <button class="btn btn-outline-default swap border-0">
            <i class="fas fa-exchange-alt fa-lg"></i><span class="sr-only">Swap stations</span>
        </button>
        <div class="field">
            {{ calling_at }}
            <button class="btn btn-outline-default clear-field border-0">
                <i class="fas fa-times"></i><span
                        class="sr-only">Clear field</span>
            </button>
        </div>
    </div>
    <div data-drupal-selector="edit-actions"
         class="form-actions js-form-wrapper form-wrapper" id="edit-actions--3">
        <button data-drupal-selector="next-trains-submit" type="submit"
                id="next-trains-submit" value="Show live trains"
                class="button button--primary js-form-submit form-submit btn btn-default btn-md"
                data-dashlane-label="true" data-dashlane-rid="b1dc8e9109b97c22"
                data-dashlane-classification="action">
            Show live trains
        </button>
    </div>
</form>