<div id="invite-header">
  <input
    class="nano-input"
    type="text"
    placeholder="Enter name or Contact ID"
    (input)="search($event.target.value)"
  />
  <mat-icon class="no-button">search</mat-icon>
</div>
<div
  *ngIf="maxMember"
  id="member-number"
  [ngClass]="{ warn: currentMember + markedUser > maxMember }"
>
  <span translate>Members </span> 
  <span> ( {{ currentMember + markedUser }} / {{ maxMember }} )</span>
</div>
<div id="invite-results">
  <div class="loading" *ngIf="loadingState">
    <mat-spinner diameter="25"></mat-spinner>
  </div>
  <div
    *ngFor="let u of showList; let i = index"
    matRipple
    (click)="markUser(u)"
  >
    <app-avatar [accountAvatarRecord]="u.user"></app-avatar>
    <span>{{ u.user.avatarName }}</span>

    <mat-checkbox
      color="primary"
      (click)="$event.preventDefault()"
      [(ngModel)]="u.isMarked"
      *ngIf="!u.isMember"
    ></mat-checkbox>
    <mat-icon *ngIf="u.isMember" [matTooltip]="'Already invited' | translate" class="no-button">person</mat-icon>
  </div>
</div>

<div class="button-div">
  <button mat-raised-button color="primary" (click)="save()">Invite</button>
</div>
