<pa-modal-advanced fitContentHeight>
  <pa-modal-title>{{ 'account.retrieval-agents.create-dialog.title' | translate }}</pa-modal-title>
  <pa-modal-content>
    <form
      class="create-agent-form"
      [formGroup]="form"
      (ngSubmit)="create()">
      <div>
        <label for="name">{{ 'account.retrieval-agents.create-dialog.agent-name' | translate }}</label>
        <pa-input
          externalLabel
          id="name"
          data-cy="new-arag-name-input"
          [placeholder]="'account.retrieval-agents.create-dialog.name-placeholder' | translate"
          formControlName="name"></pa-input>
      </div>
      @if (isAragWithMemoryEnabled | async) {
        <div>
          <label for="hasMemory">{{ 'account.retrieval-agents.create-dialog.memory' | translate }}</label>
          <pa-toggle
            formControlName="hasMemory"
            id="hasMemory">
            {{ 'account.retrieval-agents.create-dialog.memory-help' | translate }}
          </pa-toggle>
        </div>
        @if (!(canAddAragsWithMemory | async)) {
          <nsi-info-card
            type="warning"
            icon="warning">
            {{ 'account.retrieval-agents.create-dialog.memory-limit' | translate: { num: numAragsWithMemory | async } }}
          </nsi-info-card>
        }
      }
      <div>
        <label for="zone">{{ 'account.retrieval-agents.create-dialog.zone' | translate }}</label>
        <pa-radio-group formControlName="zone">
          @for (zone of zones | async; track zone.slug) {
            <pa-radio [value]="zone.slug">{{ zone.title }}</pa-radio>
          }
        </pa-radio-group>
      </div>
    </form>
  </pa-modal-content>
  <pa-modal-footer>
    <pa-button aspect="basic">{{ 'generic.cancel' | translate }}</pa-button>
    <pa-button
      kind="primary"
      [disabled]="form.invalid"
      data-cy="new-arag-save-button"
      (click)="create()">
      {{ 'generic.save' | translate }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-advanced>
