<ng-container *ngIf="jobDetail; else loading">
  <div class="row no-gutters" *ngIf="jobDetail.queueName !== 'se_coarse_cube_imaging' && canAcceptArchive(jobDetail.status, jobDetail.archiveStatus)">
    <div class="col">
      <button type="button" class="btn btn-success btn-sm" (click)="acceptQa()">Accept &amp; Archive</button>
    </div>
    <div class="col" *ngIf="jobDetail.queueName == 'quicklook'">
      <button type="button" class="btn btn-danger btn-sm" (click)="rejectQa()">Reject &amp; Archive</button>
    </div>
  </div>

  <p><b>SDM ID:</b> {{ job.jobspec_sdm_id }} </p>

  <p>
    <b>Lustre:</b>
    {{getConfigRootDataDirectory()}}/{{ jobDetail.queueName }}/{{ job.job_name }}
    <button type="button" class="btn btn-xs btn-outline-primary ml-3"
            (click)="copyToClipboard(getConfigRootDataDirectory() + '/' + jobDetail.queueName + '/' + job.job_name)">
      <fa-icon [icon]="faCopy"></fa-icon>
      Copy
    </button>
  </p>
  <p>
    <b>Weblog:</b>
    <a target="_blank"
       href="{{ getConfigWebLogBaseUrl() }}/vlass/weblog/{{ jobDetail.queueName }}/{{ job.job_name }}">
      {{ getConfigWebLogBaseUrl() }}/vlass/weblog/{{ jobDetail.queueName }}/{{ job.job_name }}
    </a>
  </p>

  <form [formGroup]="noteFormGroup" (ngSubmit)="updateNotes()" class="mb-2">
    <div class="row mt-3 mr-0">
      <div class="col-auto">
        <h4 class="pt-2">
          <fa-icon [icon]="faStickyNote"></fa-icon>
          Notes
        </h4>
        <button type="submit" class="btn btn-sm btn-outline-info bg-light">
          <fa-icon [icon]="faSave"></fa-icon>
          Save Notes
        </button>
      </div>
      <div class="col bg-dark text-light p-2 rounded" contenteditable="true" propValueAccessor="innerHTML"
           formControlName="notes" style="max-height: 400px; overflow-y: scroll; overflow-x: hidden;"></div>
    </div>
  </form>

  <app-execution-detail-planes [job]="job" *ngIf="jobDetail.queueName === 'se_coarse_cube_imaging' && canAcceptArchive(jobDetail.status, jobDetail.archiveStatus)"></app-execution-detail-planes>

  <h4 class="pt-2 border-top">
    <fa-icon [icon]="faList"></fa-icon>
    Job
  </h4>
  <app-jobspec [job]="job"></app-jobspec>

  <h4 class="mt-2">
    <fa-icon [icon]="faCheckCircle"></fa-icon>
    Tasks
  </h4>
  <div class="row m-0 py-2 mb-1 border-bottom" *ngFor="let task of jobDetail.tasks">
    <div class="col">
      <span *ngIf="task.pbsJobId">{{ task.pbsJobId }} - </span>{{ task.name }}
    </div>
    <div class="col">
      {{ task.startDate}} <span class="badge badge-light border mr-3">Start</span>
      {{ task.endDate}} <span class="badge badge-light border">End</span>
    </div>
    <div class="col-auto">
      <h6><span class="badge" [ngClass]="getTaskStatusBgClass(task.status)">
            {{ task.status }}
            </span></h6>
    </div>
  </div>
</ng-container>
<ng-template #loading>
  <app-loading></app-loading>
</ng-template>