<div class="body" *ngIf="state$ | async as state">
  <div class="header">
    <div class="header-title">
      USER LIST
      <div class="seat-consumption">
        {{state[STATE_ENUM.WHITE_LIST_ENTRY]?.length}}
        /
        {{getAllowedUsers(state[STATE_ENUM.USER_WORK_SPACE][0]) }}</div>

    </div>
    <div class="header-actions">
      <ng-container *ngIf="{numberAvailableEmails: getNumberAvailableEmails(state[STATE_ENUM.USER_WORK_SPACE][0], state[STATE_ENUM.WHITE_LIST_ENTRY])} as numberFreeEmails">
         <button
           class="btn btn-primary d-flex align-items-center"
           [disabled]="numberFreeEmails.numberAvailableEmails === 0"
           (click)="createNewInvite(numberFreeEmails.numberAvailableEmails)"
         >
            <i class="al-icon sm al-ico-plus mr-1"></i>ADD A USER
          </button>
      </ng-container>
    </div>

  </div>
  <div class="space-content">
    <div class="credentials">
      <ng-container >
        <sm-user-management-invites
          [whitelistEntries]="state[STATE_ENUM.WHITE_LIST_ENTRY]"
          [currentUser]="state[STATE_ENUM.CURRENT_USER]"
          (onRemoveWhitelistEntry)="onRemoveInviteHandler($event)"
        ></sm-user-management-invites>
      </ng-container>
    </div>
  </div>
</div>

