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

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    icon="c8y-layers"
    label="{{ 'Tenants' | translate }}"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-layers'"
    [label]="'Subtenants' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

@if (!!(appState.state$ | async).newsletter) {
  <c8y-action-bar-item [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
      }}"
      type="button"
      (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 }}"
    type="button"
    (click)="createTenant({ sendGainsightEvent: false })"
    [disabled]="!isPermittedToCreateTenanant"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Create tenant' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help src="/docs/enterprise-tenant/managing-tenants/#managing-subtenants"></c8y-help>

<div class="content-fullpage border-top border-bottom">
  <c8y-data-grid
    [title]="title"
    [loadMoreItemsLabel]="loadMoreItemsLabel"
    [loadingItemsLabel]="loadingItemsLabel"
    [displayOptions]="displayOptions"
    [columns]="columns"
    [rows]="tenants$ | async"
    [pagination]="pagination"
    [showSearch]="showSearch"
    [actionControls]="actionControls"
    (onReload)="loadTenants()"
  >
    @if (!(tenants$ | async)) {
      <c8y-loading></c8y-loading>
    } @else {
      <c8y-ui-empty-state
        [icon]="stats?.size > 0 ? 'search' : 'c8y-layers'"
        [title]="stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)"
        [subtitle]="
          stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)
        "
        *emptyStateContext="let stats"
        [horizontal]="stats?.size > 0"
      >
        @if (stats?.size === 0) {
          <div>
            <button
              class="btn btn-primary"
              title="{{ 'Create tenant' | translate }}"
              (click)="createTenant()"
              [disabled]="!isPermittedToCreateTenanant"
            >
              {{ 'Create tenant' | translate }}
            </button>
          </div>
          <p c8y-guide-docs>
            <small
              translate
              ngNonBindable
            >
              Find out more in the
              <a c8y-guide-href="/docs/enterprise-tenant/managing-tenants">user documentation</a>.
            </small>
          </p>
        }
      </c8y-ui-empty-state>
    }

    <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">
        @if (context.item.status === TenantStatus.ACTIVE) {
          <span title="{{ 'Active`tenant`' | translate }}">
            <i
              class="text-success"
              c8yIcon="check-circle"
            ></i>
          </span>
        }
        @if (context.item.status === TenantStatus.SUSPENDED) {
          <span title="{{ 'Suspended`tenant`' | translate }}">
            <i
              class="text-danger"
              c8yIcon="ban"
            ></i>
          </span>
        }
      </ng-container>
    </c8y-column>
  </c8y-data-grid>
</div>