<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">
      @if ((textFilter$ | async).length === 0) {
        <i c8yIcon="search"></i>
      }
      @if ((textFilter$ | async).length > 0) {
        <i
          class="text-muted"
          c8yIcon="times"
          (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>
  @if (!canAddReport) {
    <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"
    >
      <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>
  @if ((reports$ | async)?.data.length > 0) {
    <c8y-li class="page-sticky-header hidden-xs hidden-sm">
      <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">
      @let reportName = report.translateDashboardTitle ? (report.name | translate) : report.name;
      <div class="col-3">
        <button
          class="btn-clean"
          title="{{ reportName }}"
          type="button"
          routerLink="/reports/{{ report.id }}"
        >
          <span class="text-truncate">
            {{ reportName }}
          </span>
        </button>
      </div>
      <div class="col-6">
        <p class="small text-truncate-wrap">
          @if (!report.description) {
            <em class="text-muted">
              {{ 'No description available' | translate }}
            </em>
          } @else {
            {{ report.description }}
          }
        </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>

@if ((reports$ | async)?.data.length === 0) {
  <c8y-ui-empty-state
    [icon]="'c8y-reports'"
    [title]="'There are no reports defined.' | translate"
    [subtitle]="'Add a report first.' | translate"
  >
    <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"
        c8yProductExperience
        [actionName]="PRODUCT_EXPERIENCE.DASHBOARD.EVENTS.REPORTS"
        [actionData]="{ action: PRODUCT_EXPERIENCE.DASHBOARD.ACTIONS.ADD_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>
}