<form role="form" ng-submit="applyRelative()" class="form-inline" name="relativeTime">
  <div class="kbn-timepicker-body kuiVerticalRhythm">
    <div class="kbn-timepicker-section kbn-timepicker-body-column">
      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
        <label class="kuiLocalDropdownHeader__label">
          From
        </label>

        <div class="kuiLocalDropdownHeader__actions">
          <a
            class="kuiLocalDropdownHeader__action"
            ng-click="setRelativeToNow({key:'from'})"
            kbn-accessible-click
          >
            Set To Now
          </a>
        </div>
      </div>

      <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
        <span ng-show="relative.from.preview">
          {{relative.from.preview}}
        </span>
        <span ng-hide="relative.from.preview">
          <em>Invalid Expression</em>
        </span>
      </div>

      <div class="kuiFieldGroup kuiVerticalRhythmSmall">
        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide">
          <input
            required
            ng-model="relative.from.count"
            ng-change="formatRelative({key:'from'})"
            greater-than="-1"
            min="0"
            type="number"
            ng-class="{ 'kuiTextInput-isInvalid' : checkRelative() }"
            class="kuiTextInput fullWidth"
          >
        </div>

        <div class="kuiFieldGroupSection">
          <select
            ng-model="relative.from.unit"
            ng-options="opt.value as opt.text for opt in relativeOptions"
            ng-change="formatRelative({key:'from'})"
            ng-class="{ 'kuiSelect-isInvalid': checkRelative() }"
            class="kuiSelect fullWidth"
          >
          </select>
        </div>
      </div>

      <div class="kuiVerticalRhythmSmall">
        <label class="kuiCheckBoxLabel">
          <input
            class="kuiCheckBox"
            type="checkbox"
            ng-model="relative.from.round"
            ng-checked="relative.from.round"
            ng-change="formatRelative({key:'from'})"
          >
          <span class="kuiCheckBoxLabel__text">
            round to the {{units[relative.from.unit.substring(0,1)]}}
          </span>
        </label>
        <div
          ng-class="{ 'kbn-timepicker-error': checkRelative() }"
          ng-show="checkRelative()">
          <strong>From</strong> must occur before <strong>To</strong>
        </div>
      </div>
    </div>

    <div class="kbn-timepicker-section kbn-timepicker-body-column">
      <div class="kuiLocalDropdownHeader kbn-timepicker-form-header">
        <label class="kuiLocalDropdownHeader__label">
          To
        </label>

        <div class="kuiLocalDropdownHeader__actions">
          <a
            class="kuiLocalDropdownHeader__action"
            ng-click="setRelativeToNow({key:'to'})"
            kbn-accessible-click
          >
            Set To Now
          </a>
        </div>
      </div>

      <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
        <span ng-show="relative.to.preview">
          {{relative.to.preview}}
        </span>
        <span ng-hide="relative.to.preview">
          <em>Invalid Expression</em>
        </span>
      </div>

      <div class="kuiFieldGroup kuiVerticalRhythmSmall">
        <div class="kuiFieldGroupSection kuiFieldGroupSection--wide">
          <input
            required
            ng-model="relative.to.count"
            ng-change="formatRelative({key:'to'})"
            greater-than="-1"
            min="0"
            type="number"
            ng-class="{ 'kuiTextInput-isInvalid': checkRelative() }"
            class="kuiTextInput fullWidth"
          >
        </div>

        <div class="kuiFieldGroupSection">
          <select
            ng-model="relative.to.unit"
            ng-options="opt.value as opt.text for opt in relativeOptions"
            ng-change="formatRelative({key:'to'})"
            ng-class="{ 'kuiSelect-isInvalid': checkRelative() }"
            class="kuiSelect fullWidth"
          >
          </select>
        </div>
      </div>

      <div class="kuiVerticalRhythmSmall">
        <label class="kuiCheckBoxLabel">
          <input
            class="kuiCheckBox"
            type="checkbox"
            ng-model="relative.to.round"
            ng-checked="relative.to.round"
            ng-change="formatRelative({key:'to'})"
          >
          <span class="kuiCheckBoxLabel__text">
            round to the {{units[relative.to.unit.substring(0,1)]}}
          </span>
        </label>
      </div>
    </div>
  </div>

  <div class="kbn-timepicker-actions kuiVerticalRhythm">
    <button
      data-test-subj="timepickerGoButton"
      type="submit"
      class="kuiButton kuiButton--primary kbn-timepicker-submit-button"
      ng-disabled="!(relative.from.preview && relative.to.preview) || checkRelative()"
    >
      Go
    </button>
  </div>
</form>
