<c8y-ui-action-bar-set>
  <li
    class="navbar-form"
    action-bar-position="right"
    action-bar-priority="2000"
  >
    <label class="c8y-switch">
      <input
        type="checkbox"
        ng-model="vm.uiAceOptions.theme"
        ng-false-value="'chrome'"
        ng-true-value="'monokai'"
      />
      <span></span>
      {{ vm.uiAceOptions.themeLabel | translate }}
    </label>
  </li>
  <li
    action-bar-position="right"
    action-bar-priority="2000"
  >
    <c8y-app-logs-auto-refresh
      (on-new-logs)="vm.onNewLogs($event)"
      (is-realtime-enabled)="vm.updateRealtimeState($event)"
      [selected-instance]="vm.selectedInstance"
      [mo]="vm.mo"
      [buttons-disabled]="vm.buttonsDisabled"
    ></c8y-app-logs-auto-refresh>
  </li>
</c8y-ui-action-bar-set>

<div class="card content-fullpage--sm content-fullpage--xs">
  <div class="d-flex d-col fit-h">
    <div class="card-block overflow-visible flex-no-shrink">
      <div class="row">
        <div class="col-md-8">
          <div class="d-flex a-i-center">
            <label
              class="m-r-4 m-b-0 text-nowrap"
              translate
            >Instance name</label>
            <ui-select
              ng-model="vm.selectedInstance.name"
              on-select="vm.onInstanceChange($item)"
              class="flex-grow"
              ng-disabled="vm.buttonsDisabled"
            >
              <ui-select-match
                placeholder="{{ 'Select instance' | translate }}">
                {{ $select.selected.name }}
              </ui-select-match>
              <ui-select-choices
                repeat="instance.name as instance in vm.instancesCopy | filter: $select.search"
                class="min-width-100"
              >
                <div title="{{ instance.name }}">
                  {{ instance.name }}
                </div>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
        <div class="col-md-4">
          <div class="p-t-8 p-t-md-0"></div>
          <div
            class="dropdown"
            uib-dropdown
            auto-close="{{ vm.shouldClose }}"
            is-open="isDropdownOpen"
          >
            <div class="d-flex a-i-center">
              <label
                class="m-r-4 m-b-0"
                translate
              >From`date`</label>
              <button
                class="form-control dropdown-toggle d-flex a-i-center"
                type="button"
                uib-dropdown-toggle
                aria-haspopup="true"
                data-cy="appInstanceLogs--dateFromToggle"
              >
                <span>
                  {{ vm.selectedInstance.dateFrom | absoluteDateTimeFormat: 'LL, LTS':'+0000' }}
                  UTC
                </span>
                <i
                  c8y-icon="caret-down"
                  class="text-primary"
                ></i>
              </button>
            </div>
            <ul
              class="dropdown-menu dropdown-menu-right"
              uib-dropdown-menu
              style="min-width: 350px"
            >
              <li class="dropdown-form">
                <form
                  name="logRequestForm"
                  class="form"
                >
                  <div class="form-group c8y-datetime-picker">
                    <span class="d-flex">
                      <c8y-date-time-picker
                        is-open="vm.dateFromPickerOpen"
                        ng-model="vm.dateFrom"
                        placeholder="{{ 'From`date`' | translate }}"
                        show-seconds="true"
                        append-to-body="true"
                      ></c8y-date-time-picker>
                      <span class="m-l-4">UTC</span>
                    </span>
                  </div>
                  <button
                    title="{{ 'Apply' | translate }}"
                    class="btn btn-primary btn-block"
                    ng-disabled="logRequestForm.$invalid || vm.buttonsDisabled"
                    ng-click="vm.onDateFromChange(vm.dateFrom); isDropdownOpen = !isDropdownOpen"
                    translate
                  >
                    Apply
                  </button>
                </form>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="card-block p-t-0 p-b-0 fit-h">
      <div
        ui-ace="vm.uiAceSettings"
        ng-model="vm.selectedInstance.logs"
        class="fit-h"
        readonly
      ></div>
    </div>

    <div class="card-footer">
      <div class="d-flex">
        <div class="m-l-auto btn-group">
          <button
            title="{{ 'First`page`' | translate }}"
            type="button"
            class="btn btn-default"
            ng-class="{ 'btn-pending': vm.buttonsDisabled }"
            ng-click="vm.onFastBackwardButtonClick()"
            ng-disabled="vm.buttonsDisabled"
          >
            <i c8y-icon="skip-previous"></i>
          </button>
          <button
            title="{{ 'Previous`page`' | translate }}"
            type="button"
            class="btn btn-default"
            ng-class="{ 'btn-pending': vm.buttonsDisabled }"
            ng-click="vm.onBackButtonClick()"
            ng-disabled="vm.buttonsDisabled"
          >
            <i c8y-icon="caret-back"></i>
          </button>
          <button
            title="{{ 'Next`page`' | translate }}"
            type="button"
            class="btn btn-default"
            ng-class="{ 'btn-pending': vm.buttonsDisabled }"
            ng-click="vm.onNextButtonClick()"
            ng-disabled="vm.buttonsDisabled || vm.isRealtimeEnabled"
          >
            <i c8y-icon="forward"></i>
          </button>
          <button
            title="{{ 'Last`page`' | translate }}"
            type="button"
            class="btn btn-default"
            ng-class="{ 'btn-pending': vm.buttonsDisabled }"
            ng-click="vm.onFastForwardButtonClick()"
            ng-disabled="vm.buttonsDisabled || vm.isRealtimeEnabled"
          >
            <i c8y-icon="skip-next"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>