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

<c8y-action-bar-item *ngIf="!!(appState.state$ | async).newsletter" [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{
      'Downloads the list of emails of users subscribed for newsletter on the current tenant and its subtenants.'
        | translate
    }}"
    (click)="downloadNewsletterEmails()"
  >
    <i c8yIcon="download"></i>
    {{ 'Email addresses' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" title="{{ 'Create tenant' | translate }}" (click)="createTenant()">
    <i c8yIcon="plus-circle"></i>
    {{ 'Create tenant' | translate }}
  </button>
</c8y-action-bar-item>

<!-- <c8y-help src="/users-guide/enterprise-tenant/#managing-tenants"></c8y-help> -->

<div class="content-fullpage d-flex d-col shadow1">
  <c8y-data-grid
    [title]="title"
    [loadMoreItemsLabel]="loadMoreItemsLabel"
    [loadingItemsLabel]="loadingItemsLabel"
    [displayOptions]="displayOptions"
    [columns]="columns"
    [rows]="tenants$ | async"
    [pagination]="pagination"
    [showSearch]="showSearch"
    [actionControls]="actionControls"
    (onReload)="loadTenants()"
  >
    <div class="c8y-empty-state j-c-center">
      <ng-container *ngIf="!(tenants$ | async)">
        <c8y-loading></c8y-loading>
      </ng-container>

      <ng-container *ngIf="(tenants$ | async)?.length === 0">
        <div class="text-center">
          <h1 c8yIcon="gears"></h1>
          <h3 translate>There are no tenants defined.</h3>
          <p translate>Create the first tenant.</p>
          <div>
            <button
              class="btn btn-primary"
              title="{{ 'Create tenant' | translate }}"
              (click)="createTenant()"
            >
              {{ 'Create tenant' | translate }}
            </button>
          </div>
          <p c8y-guide-docs>
            <small translate ngNonBindable>
              Find out more in the
              <a c8y-guide-href="users-guide/enterprise-edition/#managing-tenants">
                User guide`KEEP_ORIGINAL` </a
              >.
            </small>
          </p>
        </div>
      </ng-container>

      <ng-container *ngIf="(tenants$ | async)?.length > 0">
        <div class="text-center">
          <h1 class="c8y-icon-duocolor" c8yIcon="search"></h1>
          <h3 translate>No tenants to display.</h3>
          <p translate>Refine your search terms or check your spelling.</p>
        </div>
      </ng-container>
    </div>

    <c8y-column name="company">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value }}">
          <a [routerLink]="['/tenants', context.item.id]">{{ context.value }}</a>
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="parent">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value || currentTenant.name }}">
          {{ context.value || currentTenant.name }}
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="creationTime">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value | c8yDate }}">
          {{ context.value | c8yDate }}
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="status">
      <ng-container *c8yCellRendererDef="let context">
        <span
          *ngIf="context.item.status === TenantStatus.ACTIVE"
          title="{{ 'Active`tenant`' | translate }}"
        >
          <i c8yIcon="check-circle" class="text-success"></i>
        </span>
        <span
          *ngIf="context.item.status === TenantStatus.SUSPENDED"
          title="{{ 'Suspended`tenant`' | translate }}"
        >
          <i c8yIcon="ban" class="text-danger"></i>
        </span>
      </ng-container>
    </c8y-column>
  </c8y-data-grid>
</div>