@let isSuspensionActive = suspensionActive$ | async;
@let provider = provider$ | async;
<app-header [title]="pageTitle">
  <bit-search [placeholder]="'search' | i18n" [formControl]="searchControl"></bit-search>
  @if (provider?.type === ProviderUserType.ProviderAdmin) {
    <button
      bitButton
      buttonType="primary"
      type="button"
      [bitMenuTriggerFor]="clientMenu"
      [disabled]="isSuspensionActive"
      [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
      appA11yTitle="{{ 'add' | i18n }}"
      startIcon="bwi-plus"
    >
      {{ "add" | i18n }}
    </button>
  }
  <bit-menu #clientMenu>
    <button
      type="button"
      bitMenuItem
      [disabled]="isSuspensionActive"
      [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
      (click)="createClient()"
    >
      <i aria-hidden="true" class="bwi bwi-business"></i>
      {{ newClientButtonLabel }}
    </button>
    <button
      type="button"
      bitMenuItem
      [disabled]="isSuspensionActive"
      [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
      (click)="addExistingOrganization()"
    >
      <i aria-hidden="true" class="bwi bwi-grid"></i>
      {{ "existingOrganization" | i18n }}
    </button>
  </bit-menu>
</app-header>

<ng-container *ngIf="loading">
  <i
    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
</ng-container>

<ng-container *ngIf="!loading">
  <bit-table-scroll [dataSource]="dataSource" [rowSize]="53" class="tw-overflow-hidden">
    <ng-container header>
      <th colspan="2" bitCell bitSortable="organizationName" default>{{ clientColumnHeader }}</th>
      <th bitCell bitSortable="seats">{{ "assigned" | i18n }}</th>
      <th bitCell bitSortable="occupiedSeats">{{ "used" | i18n }}</th>
      <th bitCell bitSortable="remainingSeats">{{ "remaining" | i18n }}</th>
      <th bitCell bitSortable="plan">{{ "billingPlan" | i18n }}</th>
      <th></th>
    </ng-container>
    <ng-template bitRowDef let-row>
      <td bitCell width="30">
        <bit-avatar [text]="row.organizationName" [id]="row.id"></bit-avatar>
      </td>
      <td bitCell width="325">
        <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
          <a bitLink [routerLink]="['/organizations', row.organizationId]">{{
            row.organizationName
          }}</a>
        </div>
      </td>
      <td bitCell class="tw-whitespace-nowrap">
        <span class="tw-text-muted">{{ row.seats }}</span>
      </td>
      <td bitCell class="tw-whitespace-nowrap">
        <span class="tw-text-muted">{{ row.occupiedSeats }}</span>
      </td>
      <td bitCell class="tw-whitespace-nowrap">
        <span class="tw-text-muted">{{ row.remainingSeats }}</span>
      </td>
      <td width="150" bitCell class="tw-whitespace-nowrap">
        <span class="tw-text-muted">{{ row.plan | replace: " (Monthly)" : "" }}</span>
      </td>
      <td bitCell class="tw-text-right">
        <button
          [bitMenuTriggerFor]="rowMenu"
          type="button"
          bitIconButton="bwi-ellipsis-v"
          size="small"
          label="{{ 'options' | i18n }}"
        ></button>
        <bit-menu #rowMenu>
          <button
            type="button"
            bitMenuItem
            [disabled]="isSuspensionActive"
            [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
            (click)="manageClientName(row)"
          >
            <i aria-hidden="true" class="bwi bwi-pencil-square"></i>
            {{ "updateName" | i18n }}
          </button>
          <button
            type="button"
            bitMenuItem
            [disabled]="isSuspensionActive"
            [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
            (click)="manageClientSubscription(row)"
          >
            <i aria-hidden="true" class="bwi bwi-family"></i>
            {{ "manageSubscription" | i18n }}
          </button>
          @if (provider?.type === ProviderUserType.ProviderAdmin) {
            <button type="button" bitMenuItem variant="danger" (click)="remove(row)">
              <bit-icon name="bwi-close" slot="start" />
              {{ "unlinkOrganization" | i18n }}
            </button>
          }
        </bit-menu>
      </td>
    </ng-template>
  </bit-table-scroll>
  <div *ngIf="dataSource.data.length === 0" class="tw-mt-10">
    <app-no-clients
      [showAddOrganizationButton]="provider?.type === ProviderUserType.ProviderAdmin"
      [disableAddOrganizationButton]="isSuspensionActive"
      (addNewOrganizationClicked)="createClient()"
    />
  </div>
</ng-container>