<div class="container">
    <div class="row">
        <h1 class="col-12">
            {{headerKey | translate}}
        </h1>
        <div class="col-12 col-md-6 mb-2">
            <form #form="ngForm" (ngSubmit)="submitForm(form)">
                <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
                <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
                <a [routerLink]="['/processes']" class="btn btn-danger float-left">{{ 'process.new.cancel' | translate }}</a>
                <button type="submit" class="btn btn-primary float-right">{{ 'process.new.submit' | translate }}</button>
            </form>
        </div>
        <div class="col-12 col-md-6">
            <ds-script-help *ngIf="selectedScript" [script]="selectedScript"></ds-script-help>
        </div>
    </div>

    <div *ngIf="missingParameters.length > 0" class="mt-3 alert alert-danger validation-error">
        {{'process.new.parameter.required.missing' | translate}}
        <ul>
            <li *ngFor="let missing of missingParameters">{{missing}}</li>
        </ul>
    </div>
</div>
