<form class="aca-rule-details__form" [ngClass]="{ 'aca-read-only': readOnly }" [formGroup]="form">

  <ng-container *ngIf="!preview">
    <div class="aca-rule-details__form__row">
      <label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
      <div>
        <mat-form-field class="aca-rule-details__form__row__field">
          <input
            id="rule-details-name-input"
            matInput
            type="text"
            formControlName="name"
            [placeholder]="'ACA_FOLDER_RULES.RULE_DETAILS.PLACEHOLDER.NAME' | translate"
            data-automation-id="rule-details-name-input">
          <mat-error>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.REQUIRED' | translate }}</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="aca-rule-details__form__row aca-rule-details__form__description">
      <label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
      <div>
        <mat-form-field class="aca-rule-details__form__row__field">
        <textarea
          class="aca-rule-details__form__row__field__textarea"
          id="rule-details-description-textarea"
          matInput formControlName="description" data-automation-id="rule-details-description-textarea"
          [placeholder]="descriptionPlaceHolder | translate">
        </textarea>
        </mat-form-field>
      </div>
    </div>
  </ng-container>

  <div class="aca-rule-details__form__row aca-rule-details__form__triggers">
    <span id="rule-triggers-label" class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</span>
    <div>
      <aca-rule-triggers formControlName="triggers" data-automation-id="rule-details-triggers-component" />
      <mat-error class="aca-rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
    </div>
  </div>

  <div class="aca-rule-details__form__conditions">
    <aca-rule-composite-condition [readOnly]="readOnly" formControlName="conditions" />
    <mat-error class="aca-rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
  </div>

  <div class="aca-rule-details__form__row aca-rule-details__form__actions">
    <div id="rule-actions-label" class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
    <aca-rule-action-list
      formControlName="actions"
      [actionDefinitions]="actionDefinitions"
      [parameterConstraints]="parameterConstraints"
      [readOnly]="readOnly"
      [nodeId]="nodeId" />
  </div>

  <div class="aca-rule-details__form__row aca-rule-details__form__others" *ngIf="showOptionsSection">
    <span id="rule-options-label" class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</span>
    <aca-rule-options
      formControlName="options"
      data-automation-id="rule-details-options-component"
      [errorScriptConstraint]="errorScriptConstraint" />
  </div>

</form>
