<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('')"
      ></i>
    </span>
  </div>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link"
    title="{{ 'Add report' | translate }}"
    (click)="add()"
    >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add report' | translate }}
  </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>

 <!-- TODO: uncomment when help is available 
  <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>
            Delete
          </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>