@if (isLoading()) {
  <mat-spinner class="adf-start-process-loading" />
} @else {
  @if (hasApplications() || hasProcessDefinitions() ) {
    <div class="adf-start-process">
      @if (title) {
        <div class="adf-title">{{ title | translate}}</div>
      }
      <div class="content">
        <div class="adf-start-process-definition-container">
          @if (showSelectApplicationDropdown) {
            <mat-form-field class="adf-start-process-app-list">
              <mat-label>{{ 'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate }}</mat-label>
              <mat-select
                placeholder="{{ 'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate }}"
                (selectionChange)="onAppSelectionChange($event)"
                [(ngModel)]="selectedApplication"
                class="adf-start-process-definition-select"
                data-automation-id="adf-start-process-apps-drop-down">
                @for (application of applications; track application) {
                  <mat-option
                    [value]="application"
                    role="option"
                    [attr.data-automation-id]="'adf-start-process-apps-option-' + application.name">
                    {{ application.name }}
                  </mat-option>
                }
              </mat-select>
            </mat-form-field>
          }
          <mat-form-field class="adf-process-input-container">
            <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
            <input
              type="text"
              matInput
              [formControl]="processDefinitionInput"
              [matAutocomplete]="auto"
              id="processDefinitionName">
            <div class="adf-process-input-autocomplete">
              <mat-autocomplete
                #auto="matAutocomplete"
                id="processDefinitionOptions"
                [displayWith]="displayFn">
                @for (processDef of filteredProcessesDefinitions$ | async; track processDef) {
                  <mat-option [value]="processDef.name"
                    (click)="processDefinitionSelectionChanged(processDef)">
                    {{ processDef.name }}
                  </mat-option>
                }
              </mat-autocomplete>
              @if (!isProcessDefinitionsLoading ) {
                @if (showSelectProcessDropdown) {
                  <button
                    class="adf-start-process-button"
                    id="adf-select-process-dropdown"
                    mat-icon-button
                    (click)="displayDropdown($event)"
                    [disabled]="isDropdownDisabled()"
                    [attr.aria-label]="'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate | uppercase">
                    <mat-icon>arrow_drop_down</mat-icon>
                  </button>
                }
              } @else {
                <mat-spinner id="adf-select-process-spinner" [diameter]="20" />
              }
            </div>
          </mat-form-field>
        </div>
        <mat-form-field class="adf-process-input-container adf-process-input-container-process-name">
          <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}</mat-label>
          <input
            matInput
            [formControl]="processNameInput"
            id="processName"
            required/>
          @if (nameController.hasError('maxlength')) {
            <mat-error>
              {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxProcessNameLength } }}
            </mat-error>
          }
          @if (nameController.hasError('required')) {
            <mat-error>
              {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
            </mat-error>
          }
          @if (nameController.hasError('pattern')) {
            <mat-error>
              {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
            </mat-error>
          }
        </mat-form-field>
        @if (!isProcessDefinitionsLoading ) {
          @if (isProcessDefinitionSelected() ) {
            @if (hasStartForm()) {
              <adf-start-form
                #startForm
                [data]="populatedFormData"
                [disableStartProcessButton]="processNameInput.invalid"
                [processDefinitionId]="selectedProcessDef.id"
                (outcomeClick)="onOutcomeClick($event)"
                [showRefreshButton]="false">
                <button
                  class="adf-start-process-button"
                  adf-form-custom-button
                  mat-button
                  (click)="cancelStartProcess()"
                  id="cancel_process">
                  {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
                </button>
              </adf-start-form>
            } @else {
              <adf-empty-content
                class="adf-start-process-empty-template"
                [icon]="'assessment'"
                [title]="'ADF_PROCESS_LIST.START_PROCESS.NO_START_FORM'  | translate" />
            }
          } @else {
            <adf-empty-content class="adf-start-process-empty-template"
              [icon]="'assessment'"
              [title]="'ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEF_SELECTED'  | translate" />
          }
        } @else {
          <mat-spinner class="adf-start-process-loading" />
        }
      </div>
      @if (!hasStartForm()) {
        <div class="adf-start-process-content-actions">
          @if (!hasStartForm()) {
            <button
              class="adf-start-process-button"
              mat-button
              (click)="cancelStartProcess()"
              id="cancel_process">
              {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate | uppercase}}
            </button>
          }
          @if (!hasStartForm()) {
            <button
              color="primary"
              mat-button
              [disabled]="!validateForm()"
              (click)="startProcess()"
              data-automation-id="btn-start"
              id="button-start"
              class="btn-start adf-start-process-button">
              {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate | uppercase}}
            </button>
          }
        </div>
      }
    </div>
  } @else {
    <adf-empty-content class="adf-start-process-empty-template"
      [icon]="'assessment'"
      [title]="'ADF_PROCESS_LIST.START_PROCESS.NO_PROCESS_DEFINITIONS' | translate" />
  }
}