<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 [matRippleDisabled]="u.isMember" (click)="markUser(u)" [ngClass]="{ selectable: !u.isMember }">
    <span class="user-info-container">
      <app-avatar [accountAvatarRecord]="u.user"></app-avatar>
      <span class="user-name-container">
        <span class="user-name" *ngIf="!u.user.deleted">{{ u.user.avatarName }}</span
        ><span class="data-error" *ngIf="u.user.deleted" translate>Deleted user</span>
      </span>
    </span>

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

<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close><span translate>Cancel</span></button>
  <button mat-raised-button color="primary" (click)="save()" [disabled]="this.markedUser === 0">Invite</button>
</mat-dialog-actions>
