<div class="container" *ngVar="(processRD$ | async)?.payload as process">
    <div class="d-flex">
        <h2 class="flex-grow-1">{{'process.detail.title' | translate:{id: process?.processId, name: process?.scriptName} }}</h2>
        <div>
            <a class="btn btn-light" [routerLink]="'/processes/new'" [queryParams]="{id: process?.processId}">{{'process.detail.create' | translate}}</a>
        </div>
    </div>
    <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
        <div>{{ process?.scriptName }}</div>
    </ds-process-detail-field>

    <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments" [title]="'process.detail.arguments'">
        <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
    </ds-process-detail-field>

    <div *ngVar="(filesRD$ | async)?.payload?.page as files">
        <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.detail.output-files'">
          <ds-file-download-link *ngFor="let file of files; let last=last;" [href]="file?._links?.content?.href" [download]="getFileName(file)">
            <span>{{getFileName(file)}}</span>
            <span>({{(file?.sizeBytes) | dsFileSize }})</span>
          </ds-file-download-link>
        </ds-process-detail-field>
    </div>

    <ds-process-detail-field *ngIf="process && process.startTime" id="process-start-time" [title]="'process.detail.start-time' | translate">
        <div>{{ process.startTime }}</div>
    </ds-process-detail-field>

    <ds-process-detail-field *ngIf="process && process.endTime" id="process-end-time" [title]="'process.detail.end-time' | translate">
        <div>{{ process.endTime }}</div>
    </ds-process-detail-field>

    <ds-process-detail-field *ngIf="process && process.processStatus" id="process-status" [title]="'process.detail.status' | translate">
        <div>{{ process.processStatus }}</div>
    </ds-process-detail-field>

    <!--<ds-process-detail-field id="process-output" [title]="'process.detail.output'">-->
    <!--<pre class="font-weight-bold text-secondary bg-light p-3">{{'process.detail.output.alert' | translate}}</pre>-->
    <!--</ds-process-detail-field>-->

    <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
</div>
