<div class="page-spacing">
  <header>
    @if (task) {
      <div class="breadcrumbs">
        <a [routerLink]="tasksRoute | async">{{ 'tasks-automation.page-title' | translate }}</a>
        <pa-icon
          name="chevron-right"
          size="small"></pa-icon>
        <a [routerLink]="(tasksRoute | async) + '/' + task.id">{{ task.parameters?.name }}</a>
        <pa-icon
          name="chevron-right"
          size="small"></pa-icon>
        <span>{{ 'tasks-automation.form.edit-agent' | translate }}</span>
      </div>
    } @else {
      <div class="breadcrumbs">
        <a [routerLink]="tasksRoute | async">{{ 'tasks-automation.page-title' | translate }}</a>
        <pa-icon
          name="chevron-right"
          size="small"></pa-icon>
        <span>{{ 'tasks-automation.form.new-agent' | translate }}</span>
      </div>
    }
    <div>
      @if (task) {
        <h1 class="page-title">{{ task.parameters?.name }}</h1>
      } @else {
        <h1 class="page-title">{{ 'tasks-automation.type.' + type + '.title' | translate }}</h1>
        <p class="page-description">{{ 'tasks-automation.type.' + type + '.description' | translate }}</p>
      }
    </div>
  </header>

  <form
    [formGroup]="form"
    (ngSubmit)="onSave()">
    <nsi-two-columns-configuration-item itemTitle="tasks-automation.form.task-name.title">
      <pa-input formControlName="name">{{ 'tasks-automation.form.task-name.input-label' | translate }}</pa-input>
    </nsi-two-columns-configuration-item>
    @if (filterProperties; as filters) {
      <nsi-two-columns-configuration-item
        itemTitle="tasks-automation.form.filter.title"
        description="tasks-automation.form.filter.description"
        badge="generic.badge.optional">
        @if (hasFilters && !filterExpression) {
          <div
            class="form-container"
            formGroupName="filter">
            @if (filters?.['contains']) {
              <div>
                <div class="title-s">{{ 'tasks-automation.form.filter.search-in.title-or-content' | translate }}</div>
                <pa-input formControlName="contains">
                  {{ 'tasks-automation.form.filter.search-input-label' | translate }}
                </pa-input>
                <pa-toggle formControlName="contains_operator">
                  {{ 'tasks-automation.form.filter.operator' | translate }}
                </pa-toggle>
              </div>
            }
            <div>
              <div class="title-s">{{ 'tasks-automation.form.filter.fields.button-label' | translate }}</div>
              <nsi-dropdown-button
                fullWidth
                aspect="basic"
                [popupRef]="fieldTypesDropdown">
                {{ 'tasks-automation.form.filter.fields.button-label' | translate }}

                @if (fieldTypeSelectionCount > 0) {
                  ({{
                    fieldTypeSelectionCount === fieldTypesTotalCount
                      ? ('tasks-automation.form.filter.all' | translate)
                      : fieldTypeSelectionCount
                  }})
                }
              </nsi-dropdown-button>
              <pa-dropdown #fieldTypesDropdown>
                <pa-option
                  dontCloseOnSelect
                  (selectOption)="toggleAll('fieldTypes', $event)">
                  <pa-checkbox [value]="allFieldTypesSelected">
                    {{ 'tasks-automation.form.filter.fields.all-types' | translate }}
                  </pa-checkbox>
                </pa-option>
                <pa-separator></pa-separator>
                @for (option of fieldTypeFilters; track option.id) {
                  <pa-option
                    [paTooltip]="option.help"
                    (selectOption)="onSelectFilter(option, $event)"
                    dontCloseOnSelect>
                    <pa-checkbox
                      [(value)]="option.selected"
                      (valueChange)="onToggleFilter()">
                      {{ option.label }}
                    </pa-checkbox>
                  </pa-option>
                }
              </pa-dropdown>
            </div>

            @if (hasLabelSets | async) {
              <div>
                <div class="title-s">{{ 'tasks-automation.form.filter.resource-labels.button-label' | translate }}</div>

                <app-label-dropdown
                  fullWidth
                  [multiple]="true"
                  [(selection)]="labelSelection"
                  [labelSets]="resourceLabelSets | async"
                  (selectionChange)="updateFiltersWithLabels()"
                  aspect="basic">
                  {{ 'tasks-automation.form.filter.resource-labels.button-label' | translate }}
                  @if (labelSelectionCount > 0) {
                    ({{ labelSelectionCount }})
                  }
                </app-label-dropdown>
                <pa-toggle formControlName="labels_operator">
                  {{ 'tasks-automation.form.filter.operator' | translate }}
                </pa-toggle>
              </div>
            }
            @if (can_apply_to_agent_generated_fields) {
              <div class="title-s apply-to-da-fields">
                {{ 'tasks-automation.form.filter.apply-to-da-fields' | translate }}
                <pa-toggle formControlName="apply_to_agent_generated_fields"></pa-toggle>
              </div>
            }
          </div>
        } @else {
          <div class="form-container">
            <nsi-expandable-textarea
              formControlName="filter_expression_json"
              resizable
              rows="4"
              modalTitle="tasks-automation.form.filter.filter-expression.title">
              {{ 'tasks-automation.form.filter.filter-expression.title' | translate }}
            </nsi-expandable-textarea>
            <div class="align-right">
              <pa-button (click)="openFilterExpression()">
                {{ 'tasks-automation.form.filter.filter-expression.use-assistant' | translate }}
              </pa-button>
            </div>
          </div>
        }
      </nsi-two-columns-configuration-item>
    }
    <ng-content></ng-content>
    @if (!modelsHidden) {
      <nsi-two-columns-configuration-item
        itemTitle="tasks-automation.form.llm-selection.title"
        description="tasks-automation.form.llm-selection.description">
        <div
          class="form-container"
          formGroupName="llm">
          @if (learningConfigurations) {
            <stf-model-selector
              formControlName="model"
              [providers]="generativeProviders"
              [learningConfigurations]="learningConfigurations"
              (modelSelected)="onModelSelected($event)"></stf-model-selector>
            <stf-user-keys
              [learningConfigurations]="learningConfigurations"
              [generativeModel]="generativeModel"
              (formReady)="initUserKeysForm($event)"></stf-user-keys>
            <stf-reasoning-config [(config)]="reasoningConfig"></stf-reasoning-config>
          }
          <nsi-info-card
            type="warning"
            icon="warning">
            {{ 'tasks-automation.form.llm-selection.warning' | translate }}
          </nsi-info-card>
        </div>
      </nsi-two-columns-configuration-item>
    }

    <nsi-two-columns-configuration-item
      itemTitle="tasks-automation.form.webhook.title"
      description="tasks-automation.form.webhook.description"
      badge="generic.badge.optional">
      <div
        class="form-container"
        formGroupName="webhook">
        <div>
          <label for="trigger_description">{{ 'tasks-automation.form.webhook.trigger-label' | translate }}</label>
          <nsi-info-card id="trigger_description">{{ triggerDescription | translate }}</nsi-info-card>
        </div>
        <div>
          <pa-input
            externalLabel
            formControlName="url">
            URL
          </pa-input>
        </div>
        <pa-expander
          [expanded]="false"
          [contentLoaded]="headers">
          <pa-expander-header>
            <label>{{ 'tasks-automation.form.webhook.headers.label' | translate }}</label>
          </pa-expander-header>
          <pa-expander-body>
            <div>
              <app-parameters-table
                secretDisabled
                [(values)]="headers"></app-parameters-table>
            </div>
          </pa-expander-body>
        </pa-expander>
        <pa-expander
          [expanded]="false"
          [contentLoaded]="parameters">
          <pa-expander-header>
            <label>{{ 'tasks-automation.form.webhook.params.label' | translate }}</label>
          </pa-expander-header>
          <pa-expander-body>
            <div>
              <app-parameters-table
                secretDisabled
                [(values)]="parameters"></app-parameters-table>
            </div>
          </pa-expander-body>
        </pa-expander>
      </div>
    </nsi-two-columns-configuration-item>

    <nsi-sticky-footer>
      <!--
      <span footerNote>
        @if (applyTaskValue === 'ALL' || applyTaskValue === 'NEW') {
          {{ footerNoteAutomation | translate }}
        } @else if (resourceCount !== undefined) {
          {{ footerNoteOneTime | translate: { count: resourceCount } }}
        }
      </span>
      -->
      <pa-button
        aspect="basic"
        (click)="cancel.emit()">
        {{ 'generic.cancel' | translate }}
      </pa-button>
      <pa-button
        kind="primary"
        type="submit"
        [disabled]="form.invalid || userKeysForm?.invalid || !validFormInside">
        {{ (task ? 'tasks-automation.form.save' : 'tasks-automation.form.create') | translate }}
      </pa-button>
    </nsi-sticky-footer>
  </form>
</div>
