
<div class="container-general">
  <div class="container-left">

    <div class="container-left-top">
      <div class="title-container">
        <h2 class="title-h2">{{innovationIdeaDetails?.title}}</h2>

        <ng-container *ngIf="innovationIdeaDetails?.status === enumInnovationStatus.Created || innovationIdeaDetails?.status === enumInnovationStatus.Rework">
          <mat-icon class="icon-edit" title="Edit Idea" (click)="editInnovationIdea()">mode_edit</mat-icon>
          <mat-icon class="icon-delete" title="Close Idea" (click)="closeInnovationIdea()">delete</mat-icon>
        </ng-container>
      </div>
      <h3 class="title-h3">{{innovationIdeaDetails?.category?.categoryName}}</h3>
      <h3 class="title-h3">{{innovationIdeaDetails?.category?.categoryName}}</h3>
    </div>

    <div class="container-left-bottom">
      <p class="paragraph">{{innovationIdeaDetails?.description}}</p>
      <div class="attachment" *ngIf="innovationIdeaDetails?.file?.id">
        <a (click)="downloadFile(innovationIdeaDetails?.file?.id, 'idea')" class="attachment">
          <img src="{{imageUrl}}/assets/img/employee/attachment-icon.png">
          {{innovationIdeaDetails?.file?.fileName}}
        </a>
      </div>

      <div class="feedback-cards" *ngIf="feedbackComments.length !== 0">
        <p>Reviewer FeedBacks : </p>

        <div class="feedback-list" *ngFor="let fb of feedbackComments">
          <h1>{{fb.comment}}</h1>
        </div>

      </div>

    </div>

    <div *ngIf="innovationIdeaDetails?.poc && innovationIdeaDetails?.poc.length !== 0">
      <div class="container-left-top-poc title-container">
        <h2 class="title-h2">POC - {{innovationIdeaDetails?.poc[0]?.pocTitle}}</h2>
        <mat-icon *ngIf="innovationIdeaDetails?.status === enumPOCStatus.Created || innovationIdeaDetails?.status === enumPOCStatus.Rework " class="icon-delete" title="Close POC" (click)="closeInnovationIdea()">delete</mat-icon>
      </div>
      <div class="container-left-bottom">
        <p class="paragraph">{{innovationIdeaDetails?.poc[0]?.pocDescription}}</p>
        <div class="attachment" *ngIf="innovationIdeaDetails?.poc[0]?.pocFile?.id">
          <a (click)="downloadFile(innovationIdeaDetails?.poc[0].pocFile?.id, 'poc')" class="attachment">
            <img src="{{imageUrl}}/assets/img/employee/attachment-icon.png">
            {{innovationIdeaDetails?.poc[0]?.pocFile?.fileName}}
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="container-right">
    <div class="container-right-top">
      <div id="innovation-status" [ngClass]="innovationIdeaStatus?.class">
        <app-innovation-status [status]="innovationIdeaDetails?.status"></app-innovation-status>
      </div>
    </div>
    <div class="container-right-bottom">
      <div *ngIf="innovationIdeaDetails?.coInnovators.length > 0">
        <h3 class="title-name">Co Innovators</h3>
        <div class="smallProfiles" *ngFor="let innovator of innovationIdeaDetails?.coInnovators">
          <app-small-coach-profile [fullName]="innovator.fullName"></app-small-coach-profile>
        </div>
      </div>
      <div *ngIf="innovationIdeaDetails?.reviewer?.id">
        <h3 class="title-name">Assigned To</h3>
        <div class="smallProfiles">
          <app-small-coach-profile [fullName]="innovationIdeaDetails?.reviewer?.fullName"></app-small-coach-profile>
        </div>
      </div>
    </div>

  </div>
</div>

<footer [style.padding-bottom]="showAddButton || !displayFooter ? '0px' : '20px'">
  <div class="container" [ngSwitch]="displayFooter">
    <ng-container *ngSwitchCase="'reviewer'">
      <app-my-innovation-idea-reviewer [reviewer]="reviewerDetails" [innovationType]="innovationIdeaDetails?.poc && innovationIdeaDetails?.poc.length !== 0 ? enumInnovationType.poc : enumInnovationType.idea" (actionButton)="goBack()"></app-my-innovation-idea-reviewer>
    </ng-container>
    <ng-container *ngSwitchCase="'poc'">
      <app-innovation-form [idea]="innovationIdeaDetails" [formType]="'ideaPOC'" (ideaChange)="pocSubmit($event)"></app-innovation-form>
    </ng-container>
  </div>
</footer>

<button id="btn-add-poc" *ngIf="showAddButton" (click)="displayFooter = 'poc'; showAddButton = false">ADD POC</button>
