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

      <div *ngIf="activeGroup$ | async; then editHeader; else createHeader"></div>

      <ng-template #createHeader>
        <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
      </ng-template>

      <ng-template #editHeader>
        <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>
      </ng-template>

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

      <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>
        <div after *ngIf="(canEdit$ | async) && !(activeGroup$ | async)?.permanent" 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>

      <ng-container *ngIf="(activeGroup$ | async) as groupBeingEdited">
        <div class="mb-5">
          <ds-members-list *ngIf="groupBeingEdited != null"
                           [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
        </div>
        <ds-subgroups-list *ngIf="groupBeingEdited != null"
                           [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
      </ng-container>
    </div>
  </div>
</div>
