@if (processDefinitionLoaded) {
    <mat-card appearance="outlined" class="adf-start-process">
        <mat-card-content>
            @if (showTitle) {
                <mat-card-title class="adf-title">
                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}
                </mat-card-title>
            }

            @if (errorMessageId) {
                <mat-card-subtitle class="adf-error-message" id="error-message">
                    {{ errorMessageId | translate }}
                </mat-card-subtitle>
            }

            @if (!isProcessDefinitionsEmpty) {
                <div>
                    <form [formGroup]="processForm" class="adf-select-process-form">
                        @if (showSelectProcessDropdown) {
                            <mat-form-field
                                class="adf-process-input-container"
                                floatLabel="always"
                                data-automation-id="adf-select-cloud-process-dropdown"
                            >
                                <mat-label class="adf-start-process-input-label">{{
                                    'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate
                                }}</mat-label>
                                <input matInput formControlName="processDefinition" [matAutocomplete]="auto" id="processDefinitionName" />

                                <div class="adf-process-input-autocomplete">
                                    <mat-autocomplete
                                        #auto="matAutocomplete"
                                        id="processDefinitionOptions"
                                        [displayWith]="displayProcessNameOnDropdown"
                                        (optionSelected)="setProcessDefinitionOnForm($event.option.value)"
                                    >
                                        <mat-option
                                            *ngFor="let processDef of filteredProcesses"
                                            [value]="getProcessDefinitionValue(processDef)"
                                            (click)="processDefinitionSelectionChanged(processDef)"
                                        >
                                            {{ getProcessDefinitionValue(processDef) }}
                                        </mat-option>
                                    </mat-autocomplete>

                                    <button
                                        id="adf-select-process-dropdown"
                                        title="{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}"
                                        mat-icon-button
                                        (click)="displayDropdown($event)"
                                    >
                                        <mat-icon>arrow_drop_down</mat-icon>
                                    </button>
                                </div>
                                @if (processDefinition.hasError('required')) {
                                    <mat-error class="adf-error-pb">
                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
                                    </mat-error>
                                }
                            </mat-form-field>
                        }

                        <adf-inplace-form-input [control]="processInstanceName">
                            <ng-container label>
                                {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}
                            </ng-container>

                            <ng-container error>
                                @if (processInstanceName.hasError('required')) {
                                    <span>
                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
                                    </span>
                                }
                                @if (processInstanceName.hasError('maxlength')) {
                                    <span id="adf-start-process-maxlength-error">
                                        {{
                                            'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH'
                                                | translate: { characters: maxNameLength }
                                        }}
                                    </span>
                                }
                                @if (processInstanceName.hasError('pattern')) {
                                    <span>
                                        {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
                                    </span>
                                }
                            </ng-container>
                        </adf-inplace-form-input>
                    </form>

                    @if (hasForm) {
                        <adf-cloud-form
                            #startForm
                            [appName]="appName"
                            [appVersion]="processDefinitionCurrent.appVersion"
                            [data]="resolvedValues"
                            [formId]="processDefinitionCurrent.formKey"
                            [displayModeConfigurations]="displayModeConfigurations"
                            [showSaveButton]="showSaveButton"
                            [showCompleteButton]="showCompleteButton"
                            [showRefreshButton]="false"
                            [showValidationIcon]="false"
                            [showTitle]="false"
                            (formContentClicked)="onFormContentClicked($event)"
                            (formLoaded)="onFormLoaded($event)"
                            (executeOutcome)="onCustomOutcomeClicked($event.outcome.name)"
                        >
                            <adf-cloud-form-custom-outcomes>
                                <ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
                            </adf-cloud-form-custom-outcomes>
                        </adf-cloud-form>
                    } @else {
                        <ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
                    }
                </div>
            } @else {
                @if (processDefinitionLoaded) {
                    <mat-card-content>
                        <mat-card-subtitle class="error-message" id="no-process-message">
                            {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}
                        </mat-card-subtitle>
                    </mat-card-content>
                }
            }
        </mat-card-content>
    </mat-card>
} @else {
    <div class="adf-loading-container">
        <mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
    </div>
}

<ng-template #taskFormCloudButtons>
    <div class="adf-start-process-cloud-actions">
        @if (showCancelButton) {
            <button mat-button (click)="cancelStartProcess()" id="cancel_process">
                {{ cancelButtonLabel }}
            </button>
        }
        @if (showStartProcessButton$ | async) {
            <button
                color="primary"
                mat-raised-button
                [disabled]="disableStartButton || !isProcessFormValid"
                (click)="startProcess()"
                data-automation-id="btn-start"
                id="button-start"
                class="adf-btn-start"
            >
                {{ startProcessButtonLabel }}
            </button>
        }
    </div>
</ng-template>