<!-- empty state-->
<c8y-ui-empty-state
  [icon]="'c8y-archive'"
  [title]="'No audit logs to display.' | translate"
  ng-if="data.length === 0 && !isFiltered"
></c8y-ui-empty-state>

<!--  no results empty state-->
<c8y-ui-empty-state
  [icon]="'search'"
  [title]="'No results to display.' | translate"
  [subtitle]="'Refine your search terms or check your spelling.' | translate"
  ng-if="data.length === 0 && isFiltered"
></c8y-ui-empty-state>

<div
  class="page-sticky-header hidden-xs c8y-list__item c8y-list--timeline"
  ng-if="data.length > 0"
>
  <div class="d-flex">
    <div class="c8y-list--timeline__item__date a-s-center m-l-16 m-r-24">
      <label>
        {{ 'Device time' | translate }}
      </label>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover-html="'Device time can be different from server time.' | translate"
        popover-placement="right"
        popover-trigger="'focus'"
      ></button>
    </div>
    <div class="c8y-list__item__block flex-grow">
      <div class="c8y-list__item__icon">
        <i class="p-l-24"></i>
      </div>
      <div class="c8y-list__item__body p-r-0">
        <div class="content-flex-57 p-r-16">
          <div class="col-4">
            {{ 'Event' | translate }}
          </div>
          <div class="col-8">
            {{ 'Description' | translate }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="c8y-list__group c8y-list--timeline"
  ng-if="data.length > 0"
>
  <div
    class="c8y-list--timeline__item"
    ng-repeat="audit in data"
  >
    <small class="c8y-list--timeline__item__date">
      {{ audit.time | absoluteDate }}
    </small>
    <div class="c8y-list__item">
      <div class="c8y-list__item__block">
        <div
          class="c8y-list__item__icon"
          ng-if="columnsConfig.type"
        >
          <button
            class="btn-clean"
            aria-label="{{ 'Audit' | translate }}"
            uib-tooltip="{{ convertType(audit.type) | translate }}"
            tooltip-trigger="'mouseenter'"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
            type="button"
            ng-if="convertTypeIcon(audit.type)"
          >
            <i c8y-icon="{{ convertTypeIcon(audit.type) }}"></i>
          </button>
          <i
            class="text-gray-medium-dark"
            c8y-icon="online1"
            ng-if="!convertTypeIcon(audit.type)"
          ></i>
        </div>

        <div
          class="c8y-list__item__body"
          ng-class="{ 'bg-warning': audit._isSupport }"
        >
          <div class="content-flex-57">
            <div
              ng-class="{ 'col-12': !columnsConfig.text, 'col-4': columnsConfig.text }"
              ng-if="columnsConfig.what"
            >
              <span>
                {{ audit.activity | translate }}
              </span>
            </div>
            <div
              ng-class="{ 'col-12': !columnsConfig.what, 'col-8': columnsConfig.what }"
              ng-if="columnsConfig.text"
            >
              <div class="text-truncate-wrap">
                <p
                  class="small text-break-word"
                  title="{{ audit.text | translate }}"
                  ng-if="columnsConfig.text"
                >
                  {{ audit.text | translate }}
                </p>
                <small
                  class="text-muted hidden-xs"
                  title="{{ audit._parsedChanges }}"
                  ng-if="columnsConfig.what"
                >
                  {{ audit._parsedChanges }}
                </small>
              </div>
            </div>
          </div>
          <div class="c8y-list__item__footer m-t-4 separator-top">
            <a
              class="small m-r-16"
              ng-if="audit.sourceLink"
              ng-href="{{ audit.sourceLink }}"
            >
              <i c8y-icon="dot-circle-o"></i>
              {{ 'Source' | translate }}
            </a>
            <button
              class="btn btn-dot small m-r-8"
              title="{{ 'Go to source' | translate }}"
              type="button"
              ng-if="audit.sourceInfo && audit.showCogWheel && !hideDevice"
              ng-click="goToAuditDetail(audit.sourceInfo)"
            >
              <i c8y-icon="dot-circle-o"></i>
              {{ 'Source' | translate }}
            </button>
            <span
              class="m-r-16"
              ng-if="audit.user"
            >
              <span class="text-label-small">
                {{ 'By`user`' | translate }}
              </span>
              {{ audit.user }}
            </span>
            <span>
              <span class="text-label-small">
                {{ 'Server time ' | translate }}
              </span>
              <span>{{ audit.creationTime | absoluteDate }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <c8y-load-more></c8y-load-more>
</div>
