<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-start">{{ 'process.new.cancel' | translate }}</a>
        <button type="submit" class="btn btn-primary float-end">{{ 'process.new.submit' | translate }}</button>
      </form>
    </div>
    <div class="col-12 col-md-6">
      @if (selectedScript) {
        <ds-script-help [script]="selectedScript"></ds-script-help>
      }
    </div>
  </div>

  @if (missingParameters.length > 0) {
    <div class="mt-3 alert alert-danger validation-error">
      {{'process.new.parameter.required.missing' | translate}}
      <ul>
        @for (missing of missingParameters; track missing) {
          <li>{{missing}}</li>
        }
      </ul>
    </div>
  }
</div>
