<c8y-title>
  {{ 'Reports' | translate }}
</c8y-title>

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form"
>
  <div class="input-group input-group-search">
    <input
      class="form-control"
      [attr.aria-label]="'Filter' | translate"
      placeholder="{{ 'Filter…' | translate }}"
      type="search"
      [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 }}"
    type="button"
    [attr.data-cy]="'reports-add-report-action-bar-button'"
    routerLink="/report/new-report"
    [disabled]="!canAddReport"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add report' | translate }}
  </button>
  <button
    class="btn btn-dot m-r-16"
    aria-label="{{ 'Info' | translate }}"
    popover="{{ 'You don\'t have permission to add reports' | translate }}"
    placement="top"
    triggers="focus"
    container="body"
    type="button"
    *ngIf="!canAddReport"
  >
    <i
      class="text-primary"
      [c8yIcon]="'info-circle'"
    ></i>
  </button>
</c8y-action-bar-item>

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

<c8y-help src="/docs/cockpit/working-with-reports/#working-with-reports"></c8y-help>

<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-60">
      <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-60">
      <div class="col-3">
        <button
          class="btn-clean"
          title="{{ report.name }}"
          type="button"
          routerLink="/reports/{{ report.id }}"
        >
          <span class="text-truncate">
            {{ report.name }}
          </span>
        </button>
      </div>
      <div class="col-6">
        <p class="small text-truncate-wrap">
          <em
            class="text-muted"
            *ngIf="!report.description; else showDescription"
          >
            {{ 'No description available' | translate }}
          </em>
          <ng-template #showDescription>
            {{ report.description }}
          </ng-template>
        </p>
      </div>
      <div class="col-2 fit-h-20 m-t-xs-8">
        <label
          class="c8y-switch c8y-switch--inline"
          title="{{ 'Show in navigator' | translate }}"
        >
          <input
            type="checkbox"
            [ngModel]="!!report.c8y_IsNavigatorNode" (ngModelChange)="report.c8y_IsNavigatorNode = $event"
            (change)="update(report)"
          />
          <span></span>
          <span class="visible-xs">
            {{ 'Show in navigator' | translate }}
          </span>
        </label>
      </div>
      <div class="col-1 hidden-xs">
        <button
          class="btn btn-dot btn-dot--danger showOnHover m-l-auto d-flex"
          [attr.aria-label]="'Remove report' | translate"
          tooltip="{{ 'Remove report' | translate }}"
          type="button"
          [delay]="500"
          (click)="delete(report)"
        >
          <i c8yIcon="minus-circle"></i>
        </button>
      </div>
      <div class="visible-xs p-t-8 text-right">
        <button
          class="btn btn-default btn-sm"
          title="{{ 'Remove report' | translate }}"
          type="button"
          (click)="delete(report)"
        >
          <i c8yIcon="delete"></i>
          {{ 'Remove report' | translate }}
        </button>
      </div>
    </c8y-li-body>
  </c8y-li>
</c8y-list-group>

<c8y-ui-empty-state
  [icon]="'c8y-reports'"
  [title]="'There are no reports defined.' | translate"
  [subtitle]="'Add a report first.' | translate"
  *ngIf="(reports$ | async)?.data.length === 0"
>
  <p>
    <button
      class="btn btn-primary"
      title="{{ 'Add report' | translate }}"
      type="button"
      [attr.data-cy]="'reports-add-report-empty-state-button'"
      [disabled]="!canAddReport"
      routerLink="/report/new-report"
    >
      {{ 'Add report' | translate }}
    </button>
  </p>
  <p c8y-guide-docs>
    <small
      translate
      ngNonBindable
    >
      Find out more in the
      <a c8y-guide-href="/docs/cockpit/working-with-reports">user documentation</a>
      .
    </small>
  </p>
</c8y-ui-empty-state>