<div
  class="log-viewer"
  ng-controller="logViewerCtrl as vm"
>
  <c8y-ui-action-bar-set>
    <li>
      <div
        class="dropdown"
        ng-class="{ open: isOpen }"
        uib-dropdown
        auto-close="{{ vm.shouldClose }}"
        is-open="isOpen"
      >
        <button
          class="dropdown-toggle c8y-dropdown"
          title="{{ 'Request log file' | translate }}"
          aria-haspopup="true"
          type="button"
          data-cy="logViewer--request-log-file"
          uib-dropdown-toggle
        >
          <i c8y-icon="file-text"></i>
          <span translate>Request log file</span>
          <span c8y-icon="caret-down"></span>
        </button>
        <ul
          class="dropdown-menu dropdown-menu-right"
          data-cy="logViewer--dropdown-menu-action-bar"
          uib-dropdown-menu
        >
          <li class="dropdown-form">
            <form
              class="form"
              name="logRequestForm"
              style="overflow: visible !important;"
            >
              <div
                class="form-group c8y-datetime-picker"
                data-cy="fromDatePicker"
              >
                <label class="logViewer">{{ 'From`date`' | translate }}</label>
                <c8y-date-time-picker
                  placeholder="{{ 'From`date`' | translate }}"
                  append-to-body="true"
                  is-open="vm.datePickerFromOpen"
                  ng-model="vm.filters.dateFrom"
                  max-date="vm.filters.dateTo"
                ></c8y-date-time-picker>
              </div>

              <div
                class="form-group c8y-datetime-picker"
                data-cy="toDatePicker"
              >
                <label class="logViewer">{{ 'To`date`' | translate }}</label>
                <c8y-date-time-picker
                  placeholder="{{ 'To`date`' | translate }}"
                  append-to-body="true"
                  is-open="vm.datePickerToOpen"
                  ng-model="vm.filters.dateTo"
                  min-date="vm.filters.dateFrom"
                ></c8y-date-time-picker>
              </div>

              <div class="form-group">
                <label
                  class="logViewer"
                  translate
                >Type of log</label>
                <ui-select
                  required
                  ng-init="vm.logtypeSelect = $select"
                  ng-model="vm.filters.logFile"
                  data-cy="logViewer--filters-log-type"
                >
                  <ui-select-match
                    title="{{ $select.selected.name }}"
                    placeholder="{{ 'Type of log' | translate }}"
                  >
                    {{ $select.selected.name }}
                  </ui-select-match>
                  <ui-select-choices
                    repeat="logType.name as logType in vm.logTypes | filter: $select.search | orderBy:'name'"
                  >
                    <div
                      title="{{ logType.name }}"
                      ng-bind="logType.name"
                    ></div>
                  </ui-select-choices>
                </ui-select>
              </div>

              <div class="form-group">
                <label
                  class="logViewer"
                  translate
                >Filter by text</label>
                <input
                  class="form-control"
                  placeholder="{{ 'Filter by text' | translate }}"
                  data-cy="logViewer--search-text"
                  ng-model="vm.filters.searchText"
                  ng-trim="false"
                />
              </div>

              <div class="form-group">
                <label
                  class="logViewer"
                  translate
                >Last lines to display</label>
                <input
                  class="form-control"
                  placeholder="{{ 'e.g.' | translate }} 10"
                  type="number"
                  required
                  ng-model="vm.filters.maximumLines"
                  data-cy="logViewer--maximum-lines"
                />
              </div>
              <button
                class="btn btn-primary btn-block"
                title="{{ 'Request log file' | translate }}"
                type="button"
                ng-disabled="logRequestForm.$invalid"
                ng-click="requestLogfile(vm.filters); isOpen = !isOpen"
                data-cy="logViewer--request-log-file-button"
                c8yProductExperience
                [actionName]="PRODUCT_EXPERIENCE.EVENT"
                [actionData]="{
                  action: PRODUCT_EXPERIENCE.LOGS.ACTIONS.REQUEST
                }"
              >
                {{ 'Request log file' | translate }}
              </button>
            </form>
          </li>
        </ul>
      </div>
    </li>

    <c8y-refresh-btn></c8y-refresh-btn>
  </c8y-ui-action-bar-set>

  <c8y-ui-empty-state
    [icon]="'file-text'"
    [title]="'No logs found.' | translate"
    ng-show="operations.length === 0"
  ></c8y-ui-empty-state>

  <div class="c8y-list__group">
    <div
      class="page-sticky-header c8y-list__item hidden-xs"
      ng-if="operations.length > 0"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i class="p-l-24"></i>
        </div>
        <div class="c8y-list__item__body">
          <div class="content-flex-50">
            <div class="col-5">
              {{ 'Operation' | translate }}
            </div>
            <div class="col-5">
              {{ 'Date' | translate }}
            </div>
            <div class="col-2"></div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="c8y-list__item collapsible"
      ng-class="{ expanded: op === selectedLog, 'realtime-animation-list': realtimeAnimation }"
      ng-repeat="op in operations track by op.id"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <button
            class="btn btn-dot"
            aria-label="{{ op.status | translate }}"
            uib-tooltip="{{ op.status | translate }}"
            tooltip-popup-delay="500"
            tooltip-trigger="'mouseenter'"
            type="button"
          >
            <i
              ng-class="statusClass(op)"
              c8y-icon="{{ statusIcon(op) }}"
            ></i>
          </button>
        </div>

        <div class="c8y-list__item__body">
          <div class="row">
            <div class="col-sm-5">
              <button
                class="btn-clean"
                ng-class="{ 'no-pointer': !hasLogFile(op) }"
                title="{{ getOperationDesc(op) | translate }}"
                type="button"
                ng-click="selectLogfile(op)"
              >
                {{ getOperationDesc(op) | translate }}
              </button>
            </div>
            <div class="col-sm-5">
              <small
                class="text-muted"
                ng-if="op.c8y_LogfileRequest.dateFrom && op.c8y_LogfileRequest.dateTo"
              >
                <i
                  class="m-r-4"
                  c8y-icon="calendar"
                ></i>
                {{ op.c8y_LogfileRequest.dateFrom | absoluteDate }} &ndash;
                {{ op.c8y_LogfileRequest.dateTo | absoluteDate }}
              </small>
            </div>
          </div>
        </div>
        <div class="c8y-list__item__actions showOnHover">
          <button
            class="btn btn-dot a-s-center"
            aria-label="{{ 'Cancel operation' | translate }}"
            uib-tooltip="{{ 'Cancel operation' | translate }}"
            tooltip-popup-delay="500"
            tooltip-placement="left"
            type="button"
            ng-if="!hasLogFile(op) && isPending(op)"
            popover-trigger="'mouseenter focus'"
            ng-click="cancel(op)"
            data-cy="logViewer--cancel-operation"
            c8yProductExperience
            [actionName]="PRODUCT_EXPERIENCE.EVENT"
            [actionData]="{
              action: PRODUCT_EXPERIENCE.LOGS.ACTIONS.CANCEL
            }"
          >
            <i c8y-icon="times-circle"></i>
          </button>
          <button
            class="btn btn-dot btn-dot--danger a-s-center"
            aria-label="{{ 'Delete operation' | translate }}"
            uib-tooltip="{{ 'Delete operation' | translate }}"
            tooltip-popup-delay="500"
            tooltip-placement="left"
            type="button"
            ng-click="remove(op)"
            ng-if="!hasLogFile(op) && isFailed(op)"
          >
            <i c8y-icon="delete"></i>
          </button>
          <button
            class="collapse-btn"
            ng-class="{ active: op === selectedLog }"
            title="{{ 'Expand' | translate }}"
            type="button"
            data-cy="logViewer--Expand-button"
            ng-click="op===selectedLog ? selectLogfile({}) :selectLogfile(op);"
            ng-if="hasLogFile(op)"
          >
            <i c8y-icon="chevron-down"></i>
          </button>
          <span
            class="dropdown settings m-r-40"
            ng-if="!hasLogFile(op) && !isPending(op) && !isFailed(op)"
          ></span>
          <span
            class="dropdown settings"
            ng-if="hasLogFile(op)"
            is-open="isopen"
            uib-dropdown
          >
            <button
              class="dropdown-toggle c8y-dropdown btn-link"
              title="{{ 'Actions' | translate }}"
              aria-haspopup="true"
              type="button"
              data-cy="index--dropdown-toggle--Action"
              uib-dropdown-toggle
            >
              <i c8y-icon="ellipsis-v"></i>
            </button>
            <ul
              class="dropdown-menu dropdown-menu-right"
              data-cy="index--dropdown-menu-right"
              uib-dropdown-menu
            >
              <li>
                <button
                  title="{{ 'Delete log' | translate }}"
                  type="button"
                  data-cy="index--Delete-log-button"
                  ng-click="remove(op)"
                >
                  <i c8y-icon="delete"></i>
                  {{ 'Delete' | translate }}
                </button>
              </li>
              <li ng-show="isBinary(op)">
                <a
                  title="{{ 'Download log' | translate }}"
                  href
                  ng-click="download(op)"
                  data-cy="index--Download-log-button"
                  c8yProductExperience
                  [actionName]="PRODUCT_EXPERIENCE.EVENT"
                  [actionData]="{
                    action: PRODUCT_EXPERIENCE.LOGS.ACTIONS.DOWNLOAD
                  }"
                >
                  <i c8y-icon="download"></i>
                  {{ 'Download' | translate }}
                </a>
              </li>
              <li ng-hide="isBinary(op) || !op.c8y_LogfileRequest.file">
                <a
                  title="{{ 'Download' | translate }}"
                  ng-href="{{ op.c8y_LogfileRequest.file }}"
                  download
                >
                  <i c8y-icon="download"></i>
                  {{ 'Download' | translate }}
                </a>
              </li>
            </ul>
          </span>
        </div>
      </div>
      <div
        class="collapse"
        uib-collapse="!(op === selectedLog)"
      >
        <div class="c8y-list__collapse__container">
          <div
            class="row"
            ng-show="op === selectedLog"
          >
            <div class="col-sm-3">
              <div
                class="legend form-block"
                translate
              >
                Details
              </div>
              <dl
                class="dl-inline small text-muted m-b-0"
                ng-show="selectedLog.c8y_LogfileRequest.dateFrom"
              >
                <dt translate>Date from</dt>
                <dd
                  ng-bind="selectedLog.c8y_LogfileRequest.dateFrom|absoluteDate"
                ></dd>
              </dl>

              <dl
                class="dl-inline small text-muted m-b-0"
                ng-show="selectedLog.c8y_LogfileRequest.dateTo"
                data-cy="logViewer--LogfileRequest.dateTo"
              >
                <dt translate>Date to</dt>
                <dd
                  ng-bind="selectedLog.c8y_LogfileRequest.dateTo | absoluteDate"
                  data-cy="logViewer--LogfileRequest.dateFrom"
                ></dd>
              </dl>
              <dl
                class="dl-inline small text-muted m-b-0"
                ng-show="selectedLog.c8y_LogfileRequest.logFile"
              >
                <dt translate>Type of log to</dt>
                <dd ng-bind="selectedLog.c8y_LogfileRequest.logFile"></dd>
              </dl>

              <dl
                class="dl-inline small text-muted m-b-0"
                ng-show="selectedLog.c8y_LogfileRequest.searchText"
              >
                <dt translate>Filtered by text</dt>
                <dd
                  class="text-pre"
                  ng-bind="selectedLog.c8y_LogfileRequest.searchText"
                ></dd>
              </dl>
              <dl
                class="dl-inline small text-muted m-b-0"
                ng-show="selectedLog.c8y_LogfileRequest.maximumLines"
              >
                <dt translate>Last N lines</dt>
                <dd ng-bind="selectedLog.c8y_LogfileRequest.maximumLines"></dd>
              </dl>
            </div>
            <div class="col-sm-9">
              <div
                class="legend form-block"
                translate
              >
                Log
              </div>
              <c8y-log-viewer></c8y-log-viewer>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <c8y-load-more change-page-size></c8y-load-more>
</div>