<form [formGroup]="groupForm" [bitSubmit]="submit" bit-dialog dialogSize="large">
  <span bitDialogTitle>
    {{ title }}
    <span *ngIf="editMode" class="tw-text-sm tw-normal-case tw-text-muted">{{ group?.name }}</span>
  </span>
  <div bitDialogContent>
    <div *ngIf="loading">
      <i
        class="bwi bwi-spinner bwi-spin tw-text-muted"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
      ></i>
      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
    </div>

    <bit-tab-group *ngIf="!loading" [(selectedIndex)]="tabIndex">
      <bit-tab label="{{ 'groupInfo' | i18n }}">
        <bit-form-field>
          <bit-label>{{ "name" | i18n }}</bit-label>
          <input bitInput appAutofocus type="text" formControlName="name" />
          <bit-hint>{{ "characterMaximum" | i18n: 100 }}</bit-hint>
        </bit-form-field>
        <bit-form-field *ngIf="isExternalIdVisible">
          <bit-label>{{ "externalId" | i18n }}</bit-label>
          <input bitInput type="text" formControlName="externalId" readonly />
          <bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>
        </bit-form-field>
      </bit-tab>

      <bit-tab label="{{ 'members' | i18n }}">
        <p>
          {{ "editGroupMembersDesc" | vfo1I18n: "editGroupMembersDescSharedFolders" }}
          <span *ngIf="cannotAddSelfToGroup$ | async">
            {{ "restrictedGroupAccessDesc" | i18n }}
          </span>
        </p>
        <bit-access-selector
          formControlName="members"
          [items]="members"
          [showMemberRoles]="true"
          [permissionMode]="PermissionMode.Hidden"
          [columnHeader]="'member' | i18n"
          [selectorLabelText]="'selectMembers' | i18n"
          [emptySelectionText]="'noMembersAdded' | i18n"
        ></bit-access-selector>
      </bit-tab>

      <bit-tab label="{{ 'collections' | vfo1I18n: 'sharedFolders' }}">
        <p>
          {{ "editGroupCollectionsDesc" | vfo1I18n: "editGroupSharedFoldersDesc" }}
          <span *ngIf="!(canAssignAccessToAnyCollection$ | async)">
            {{
              "restrictedCollectionAssignmentDesc"
                | vfo1I18n: "restrictedSharedFolderAssignmentDesc"
            }}
          </span>
        </p>
        <bit-access-selector
          formControlName="collections"
          [items]="collections"
          [permissionMode]="PermissionMode.Edit"
          [columnHeader]="'collection' | vfo1I18n: 'sharedFolder'"
          [selectorLabelText]="'selectCollections' | vfo1I18n: 'selectSharedFolders'"
          [emptySelectionText]="'noCollectionsAdded' | vfo1I18n: 'noSharedFoldersAdded'"
        ></bit-access-selector>
      </bit-tab>
    </bit-tab-group>
  </div>
  <ng-container bitDialogFooter>
    <button bitButton buttonType="primary" bitFormButton type="submit">
      {{ "save" | i18n }}
    </button>
    <button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Canceled">
      {{ "cancel" | i18n }}
    </button>
    <button
      class="tw-ml-auto"
      type="button"
      buttonType="dangerGhost"
      bitIconButton="bwi-trash"
      bitFormButton
      [bitAction]="delete"
      [label]="'delete' | i18n"
    ></button>
  </ng-container>
</form>
