<pa-modal-advanced>
  <pa-modal-title>{{ (editMode ? 'account.edit_nua_key' : 'account.create_nua_key') | translate }}</pa-modal-title>

  <pa-modal-content>
    <form
      class="nua-form"
      [formGroup]="clientForm"
      (ngSubmit)="save()">
      <pa-input
        formControlName="title"
        [errorMessages]="validationMessages.title">
        {{ 'account.nua_client' | translate }}*
      </pa-input>

      <pa-input
        id="client-email"
        formControlName="contact"
        help="account.email_info"
        [errorMessages]="validationMessages.email">
        {{ 'generic.email' | translate }}*
      </pa-input>

      <pa-checkbox
        formControlName="allow_kb_management"
        [stfUnauthorizedFeature]="(allowKbManagementAuthorized | async) === false"
        fullProBadge>
        {{ 'account.allow_kb_management' | translate }}
      </pa-checkbox>

      <pa-input
        formControlName="webhook"
        help="account.nua_webhook_help">
        {{ 'account.nua_webhook' | translate }}
      </pa-input>

      <div class="webhook-hint">
        <ncom-hint
          noMaxWidth
          label="Learn more about webhooks">
          <p [innerHTML]="'account.nua_webhook_hint' | translate"></p>
        </ncom-hint>
      </div>

      <div class="zone">
        <h4>{{ 'generic.processing-zone' | translate }}</h4>
        <p>{{ 'account.nua_key_zone' | translate }}</p>
        <pa-select
          formControlName="zone"
          [readonly]="(zones || []).length <= 1"
          [label]="'generic.processing-zone' | translate">
          @for (zone of zones; track zone.slug) {
            <pa-option [value]="zone.id">
              {{ zone.title }}
            </pa-option>
          }
        </pa-select>
      </div>
    </form>
  </pa-modal-content>

  <pa-modal-footer>
    <pa-button
      aspect="basic"
      (click)="close()">
      {{ 'generic.cancel' | translate }}
    </pa-button>
    <pa-button
      kind="primary"
      type="submit"
      data-cy="save-nua-client"
      [disabled]="clientForm.pristine || clientForm.invalid"
      (click)="save()">
      {{ 'generic.save' | translate }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-advanced>
