<sm-card class="project-card" (click)="projectClicked()"
         [isExample]=" project.name !== 'All projects' && !project.company?.id">
  <div header-content>
    <div class="d-flex justify-content-between align-items-center">
      <sm-inline-edit #projectName
                      class="title edit-name dark"
                      [originalText]="project.name"
                      [editable]="true"
                      [minWidth]="250"
                      [inlineDisabled]="true"
                      [pattern]="'^[^/]+$'"
                      (textChanged)="projectNameChanged.emit($event)"
                      (inlineActiveStateChanged)="projectNameEditActiveChanged($event)"

      >
        <span class="project-name">{{project.name}}</span>
      </sm-inline-edit>
      <div *ngIf="project.system_tags?.includes('default')" class="justify-content-end project-tag">Sample</div>
      <div class="menu-wrapper" *ngIf="!hideMenu">
        <sm-menu buttonClass="al-icon sm al-ico-bars-menu al-color light-grey-blue" [showCart]="false">
          <sm-menu-item itemLabel="Rename"
                        [disabled]="!project.company?.id"
                        (itemClicked)="projectName.inlineActivated()"></sm-menu-item>
          <sm-menu-item itemLabel="Delete"
                        [disabled]="!project.company?.id"
                        (itemClicked)="deleteProjectClicked.emit(project.id)"></sm-menu-item>
        </sm-menu>
      </div>
    </div>

  </div>
  <div class="d-flex justify-content-around">
    <ng-template></ng-template>
    <sm-circle-counter [counter]="project.id === '*'? '∞' : countAllTasks(project.stats?.active?.status_count)" label="TOTAL"
                       [type]="countAllTasks(project.stats?.active?.status_count)===0 ? 'empty':'pending'"></sm-circle-counter>
    <sm-circle-counter [counter]="project.id === '*'? '∞' : project.stats?.active?.status_count?.in_progress" label="RUNNING"
                       [type]="project.stats?.active?.status_count?.in_progress===0? 'empty':'running'"></sm-circle-counter>
    <sm-circle-counter [counter]="project.id === '*'? '∞' : project.stats?.active?.status_count?.closed" label="COMPLETED"
                       [type]="project.stats?.active?.status_count?.closed===0? 'empty':'completed'"
                       underLabel="(24 hrs)"></sm-circle-counter>
  </div>
  <div footer>
    <div class="footer-title">
      {{'COMPUTE TIME: ' + convertSecToDaysHrsMinsSec(project.stats?.active?.total_runtime)}}
    </div>
  </div>
</sm-card>
