<div class="tile-container">
  <div class="card-list" *ngFor="let project of projectDetailsInfo; index as i" > 
    <mat-card class="tile">
        <mat-card-header>
          <mat-card-title>
            <div class="no-padding no-margin">
            <div *ngIf="project.requesterEmailId == currentUser.email" class="role"><p class="role-txt">OWNER</p></div>
            <div *ngIf="project.requesterEmailId != currentUser.email" class="role-none"><p class="role-txt">test</p></div>
            <div class="more"><mat-icon class="icon">more_horiz</mat-icon></div>
          </div>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div class="title">
            <a class="btn-View" (click)="showDetails(true, project)">{{project.projectName}}</a>
            <div class="owner"><span class="hint">by </span> {{project.createdBy}}</div>
          </div>
          <div class="status" *ngIf="project.status == 'REPO_CREATED'">Environment Setup is completed</div>
          <div class="status" *ngIf="project.status != 'REPO_CREATED'">Environment Setup in progress</div>
          <div class="footer">
            <div class="date"><span class="hint">Created on  </span>{{project.createdTime}}</div>
            <div class="members-count">1 Member</div>
          </div>
          <div class="no-padding action">
              <button *ngIf="project.requesterEmailId == currentUser.email" mat-button class="action-btn" [matTooltipPosition]="position[0]" matTooltip="Under Implementation">
                  <span class="action-txt">INVITE PEOPLE</span>
                </button>
                <button *ngIf="project.requesterEmailId != currentUser.email" mat-button class="action-btn" [matTooltipPosition]="position[0]" matTooltip="Under Implementation">
                    <span class="action-txt">JOIN PROJECT</span>
                </button>
          </div>
        </mat-card-content>
      </mat-card>
  </div>
</div>