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

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-tools'"
    [label]="'Configuration' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-report'"
    [label]="'Exports' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-help [src]="'/docs/cockpit/exports/#managing-exports'"></c8y-help>

<c8y-action-bar-item [placement]="'right'">
  @let addExportLabel = 'Add export' | translate;
  @let insufficientPermissionsText = 'Insufficient permissions for this action.' | translate;
  <button
    class="btn btn-link"
    [tooltip]="canManageExports ? addExportLabel : insufficientPermissionsText"
    placement="bottom"
    container="body"
    data-cy="c8y-exports-list--add-export-button"
    (click)="addExport()"
    [disabled]="!canManageExports"
  >
    <i [c8yIcon]="'plus-circle'"></i>
    <span>{{ addExportLabel }}</span>
  </button>
</c8y-action-bar-item>

<div class="content-fullpage d-flex d-col border-top border-bottom">
  <c8y-data-grid
    [title]="title"
    [loadMoreItemsLabel]="loadMoreItemsLabel"
    [loadingItemsLabel]="loadingItemsLabel"
    [columns]="columns"
    [pagination]="pagination"
    [serverSideDataCallback]="serverSideDataCallback"
    [actionControls]="actionControls"
    [bulkActionControls]="bulkActionControls"
    [displayOptions]="displayOptions"
    [refresh]="refresh"
    [showSearch]="true"
    [selectable]="canManageExports"
  >
    <c8y-column name="exportType">
      <ng-container *c8yCellRendererDef="let context">
        <ng-container>
          @switch (context.value) {
            @case ('csv') {
              <span title="CSV">
                <i [c8yIcon]="'file-text-o'"></i>
                CSV
              </span>
            }
            @case ('vnd.ms-excel') {
              <span title="XLS">
                <i [c8yIcon]="'file-excel-o'"></i>
                XLS
              </span>
            }
            @default {
              <span [title]="context.value">
                <i [c8yIcon]="'file-text-o'"></i>
                {{ context.value }}
              </span>
            }
          }
        </ng-container>
      </ng-container>
    </c8y-column>

    <c8y-column name="dateType">
      <ng-container *c8yCellRendererDef="let context">
        @switch (context.value) {
          @case ('LAST_24HOURS') {
            <span>
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span translate>Last 24 hours</span>
            </span>
          }
          @case ('LAST_7DAYS') {
            <span>
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span translate>Last 7 days</span>
            </span>
          }
          @case ('LAST_30DAYS') {
            <span>
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span translate>Last 30 days</span>
            </span>
          }
          @case ('LAST_WEEK') {
            <span>
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span translate>Last week</span>
            </span>
          }
          @case ('LAST_MONTH') {
            <span>
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span translate>Last month</span>
            </span>
          }
          @case ('LAST_YEAR') {
            <span>
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span translate>Last year</span>
            </span>
          }
          @case ('CUSTOM') {
            <span>
              <i
                class="m-r-4"
                [c8yIcon]="'calendar'"
              ></i>
              <span>
                <label class="text-label-small">{{ 'From`date`' | translate }}</label>
                {{ context.item.queryParameters.from | c8yDate }} &nbsp;
              </span>
              <span>
                <label class="text-label-small">{{ 'To`date`' | translate }}</label>
                {{ context.item.queryParameters.to | c8yDate }}
              </span>
            </span>
          }
          @default {
            <span>{{ context.value }}</span>
          }
        }
      </ng-container>
    </c8y-column>

    <c8y-ui-empty-state
      [icon]="'search'"
      [title]="'No matching exports.' | translate"
      [subtitle]="'Refine your search terms' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
  </c8y-data-grid>
</div>