dspace-angular/src/app/access-control/group-registry/group-form/group-form.component.html

<div class="container">
  <div class="group-form row">
    <div class="col-12">

      @if (activeGroup$ | async) {
        <h1 class="border-bottom pb-2">
          <span
            *dsContextHelp="{
              content: 'admin.access-control.groups.form.tooltip.editGroupPage',
              id: 'edit-group-page',
              iconPlacement: 'right',
              tooltipPlacement: ['right', 'bottom']
            }"
            >
            {{messagePrefix + '.head.edit' | translate}}
          </span>
        </h1>
      } @else {
        <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
      }



      @if ((activeGroup$ | async); as groupBeingEdited) {
        @if (groupBeingEdited?.permanent) {
          <ds-alert [type]="AlertType.Warning"
          [content]="messagePrefix + '.alert.permanent'"></ds-alert>
        }
        @if ((activeGroupLinkedDSO$ | async); as activeGroupLinkedDSO) {
          @if ((canEdit$ | async) !== true) {
            <ds-alert [type]="AlertType.Warning"
              [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: dsoNameService.getName(activeGroupLinkedDSO), comcol: activeGroupLinkedDSO.type, comcolEditRolesRoute: (linkedEditRolesRoute$ | async) })">
            </ds-alert>
          }
        }
      }

      <ds-form [formId]="formId"
        [formModel]="formModel"
        [formGroup]="formGroup"
        [formLayout]="formLayout"
        [displayCancel]="false"
        (submitForm)="onSubmit()">
        <div before class="btn-group">
          <button (click)="onCancel()" type="button"
            class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
          </div>
          @if ((canEdit$ | async) && !(activeGroup$ | async)?.permanent) {
            <div after class="btn-group">
              <button (click)="delete()" class="btn btn-danger delete-button" type="button">
                <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
              </button>
            </div>
          }
        </ds-form>

        @if ((activeGroup$ | async); as groupBeingEdited) {
          <div class="mb-5">
            @if (groupBeingEdited !== undefined) {
              <ds-members-list
              [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
            }
          </div>
          @if (groupBeingEdited !== undefined) {
            <ds-subgroups-list
            [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
          }
        }
      </div>
    </div>
  </div>