<mat-list class="project-detail-header">
    <mat-list-item>
        <p mat-line>
            <a class="bredcrumb-link" (click)="showDetail(false)">My Project</a>
            <span class="bredcrumb">/ {{selectedViewPrj.projectName}}</span>
        </p>
    </mat-list-item>
    <mat-list-item class="matList left-align"> 
      <p mat-line class="title"> {{selectedViewPrj.projectName}}</p>
      <p mat-line class="creation-date">
        <span class="hint-txt">Created on </span>
        <span class="hint-value"> {{selectedViewPrj.createdTime}}</span>
        <span class="hint-txt"> by </span>
        <span class="hint-value"> {{selectedViewPrj.createdBy}}</span>
      </p>
    </mat-list-item>
    <mat-list-item class="matList right-align">
        <div class="right-align">
            <button mat-button class="btn-action" [matTooltipPosition]="position[0]" matTooltip="Under Implementation"><mat-icon class="icon">send</mat-icon> <span class="icon-txt"> Invite Pepole</span></button>
            <span class="more">
              <mat-icon class="icon">more_horiz</mat-icon>
            </span>
          </div> 
    </mat-list-item>
  </mat-list>
<div class="mat-headers">
  <mat-tab-group>
      <mat-tab label="PROJECT DETAILS">
        <div class="details">
        <app-employee-project-details-content [details]='true' [selectedViewPrj]="selectedViewPrj"></app-employee-project-details-content>
        </div>
      </mat-tab>
      <!-- <mat-tab label="COMMENTS"> 
        <div class="details">
          <app-employee-project-details-content [details]='false' [selectedViewPrj]="selectedViewPrj"></app-employee-project-details-content>
        </div>
      </mat-tab> -->
  </mat-tab-group>
</div>