{# LIBRARIES #}
{{ attach_library('ui_patterns/journey_smart_tabs_form.journey_smart_tabs_form_lib') }}

{# TEMPLATE #}
<form class="journey-smart-live-times-tabs-form form_google_analytics_tracking form drop-shadow"
      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 sr-only">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"
                               checked="checked" 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-content">
        <div class="js-lt-fields">
            <div class="field">
                {{ station }}
                <button type="button" class="btn btn-outline-default clear-field border-0 d-none">
                    <i class="fas fa-times"></i><span
                            class="sr-only">Clear field</span>
                </button>
            </div>
            <button type="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 type="button" class="btn btn-outline-default clear-field border-0 d-none">
                    <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>
    </div>
</form>