<c8y-title> <span translate> Reports </span>&nbsp; </c8y-title>

<c8y-action-bar-item [placement]="'left'" itemClass="navbar-form">
  <div class="input-group input-group-search">
    <input
      class="form-control"
      type="search"
      title="{{ 'Filter…' | translate }}"
      placeholder="{{ 'Filter…' | translate }}"
      [ngModel]="textFilter$ | async"
      (ngModelChange)="textFilter$.next($event)"
    />
    <span class="input-group-addon">
      <i c8yIcon="search" *ngIf="(textFilter$ | async).length === 0"></i>
      <i
        class="text-muted"
        c8yIcon="times"
        *ngIf="(textFilter$ | async).length > 0"
        (click)="textFilter$.next('')"
        px-event="Clear filtering reports"
      ></i>
    </span>
  </div>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Add report' | translate }}"
    (click)="add()"
    [disabled]="!canAddReport"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add report' | translate }}
  </button>
  <button *ngIf="!canAddReport"
    class="btn btn-clean m-r-16"
    popover="{{ 'You don\'t have permission to add reports' | translate }}"
    triggers="focus"
    placement="top"
    container="body"
  >
    <i [c8yIcon]="'info-circle'" class="text-primary"></i>
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" title="{{ 'Reload' | translate }}" (click)="loadReports()">
    <i [ngClass]="{ 'icon-spin': reloading }" c8yIcon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help src="/users-guide/cockpit/#reports"></c8y-help>

<div class="p-b-32">
  <c8y-list-group>
    <c8y-li
      class="page-sticky-header hidden-xs hidden-sm"
      *ngIf="(reports$ | async)?.data.length > 0"
    >
      <c8y-li-icon>
        <i class="p-l-24"></i>
      </c8y-li-icon>
      <c8y-li-body class="content-flex-80">
        <div class="col-3">
          {{ 'Report' | translate }}
        </div>
        <div class="col-6">
          {{ 'Description' | translate }}
        </div>
        <div class="col-2">
          {{ 'Show in navigator' | translate }}
        </div>
      </c8y-li-body>
    </c8y-li>

    <c8y-li *c8yFor="let report of reports$; let i = index; loadMore: 'auto'">
      <c8y-li-icon [icon]="report.icon"></c8y-li-icon>
      <c8y-li-body class="content-flex-70">
        <div class="col-3">
          <button class="btn-clean" title="{{ report.name }}" routerLink="/reports/{{ report.id }}">
            <span class="text-truncate">
              {{ report.name }}
            </span>
          </button>
        </div>
        <div class="col-6">
          <small class="text-truncate-wrap">
            <em class="text-muted" *ngIf="!report.description; else showDescription">
              {{ 'No description available' | translate }}
            </em>
            <ng-template #showDescription>
              {{ report.description }}
            </ng-template>
          </small>
        </div>
        <div class="col-2">
          <span class="m-t-8 visible-xs"></span>
          <label
            class="c8y-switch c8y-switch--inline"
            title="{{ 'Show in navigator' | translate }}"
          >
            <input
              [(ngModel)]="!!report.c8y_IsNavigatorNode"
              type="checkbox"
              (change)="update(report)"
            />
            <span></span>
            <span class="visible-xs">
              {{ 'Show in navigator' | translate }}
            </span>
          </label>
        </div>
        <div class="col-1 text-right hidden-xs">
          <button
            class="btn-dot showOnHover pull-right"
            (click)="delete(report)"
            title="{{ 'Remove report' | translate }}"
          >
            <i class="text-danger" c8yIcon="minus-circle"></i>
          </button>
        </div>
        <div class="visible-xs p-t-8 text-right">
          <button
            class="btn-danger btn btn-xs"
            (click)="delete(report)"
            title="{{ 'Remove report' | translate }}"
          >
            <i c8yIcon="trash"></i>
            {{ 'Remove report' | translate }}
          </button>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
</div>

<div class="c8y-empty-state text-center m-t-40" *ngIf="(reports$ | async)?.data.length === 0">
  <h1 c8yIcon="c8y-reports" class="c8y-icon-duocolor"></h1>
  <h3 translate>There are no reports defined</h3>
  <p translate>Add a report first.</p>
  <div>
    <button class="btn btn-primary" (click)="add()" translate>Add report</button>
  </div>
  <p c8y-guide-docs>
    <small translate ngNonBindable
      >Find out more in the
      <a c8y-guide-href="users-guide/cockpit/#reports"> User guide`KEEP_ORIGINAL` </a>.
    </small>
  </p>
</div>