<div class="project-list">
  <br>
  <h3>My projects</h3>
  <div *ngFor="let project of projectList" (mouseleave)="showDeleteButtonId = 0">
    <div mat-flat-button [routerLink]="['/project', project.id, activeTab]" class="config-btn pointer"
      queryParamsHandling="preserve" routerLinkActive="active" (click)="projectChange(project.id)"
      (mouseenter)="showDeleteButtonId = project.id">
      <span class="name">{{ project.name }}</span>
      <button *ngIf="showDeleteButtonId === project.id" mat-icon-button class="right"
        (click)="removeProject(project.id, project.name)">
        <img class="plus-icon" [src]="imgSrc" (mouseover)="imgSrc = './../../assets/057b-trash-outlined-gray.svg'"
          (mouseout)="imgSrc = './../../assets/057b-trash-outlined.svg'">
      </button>
      <br>
      <br>
      <span class="time"> {{ getDate(project.created_at) | timeAgo }}</span>
    </div>
  </div>
  <br>
  <button mat-raised-button class="create-new-btn" (click)="createNewProject()">
    <img class="plus-icon" src="./../../assets/008a-plus-solid-black.svg">
    Create new project
  </button>
</div>
<mat-spinner style="margin:0 auto;" mode="indeterminate" class="big-spinner-center"
  [style.display]="showSpinner ? 'block' : 'none'">
</mat-spinner>