<ng-container *ngVar="(user$ | async) as user">
  <div class="container" *ngIf="user">
    <h1>{{'profile.title' | translate}}</h1>
    <ng-container *ngIf="isResearcherProfileEnabled$ | async">
      <div class="card mb-4">
        <div class="card-header">{{'profile.card.researcher' | translate}}</div>
        <div class="card-body">
          <div class="mb-4">
            <ds-profile-page-researcher-form [user]="user" ></ds-profile-page-researcher-form>
          </div>
        </div>
      </div>
    </ng-container>
    <div class="card mb-4">
      <div class="card-header">{{'profile.card.identify' | translate}}</div>
      <div class="card-body">
        <ds-profile-page-metadata-form [user]="user"></ds-profile-page-metadata-form>
      </div>
    </div>
    <div *ngIf="canChangePassword$ | async" class="card mb-4 security-section">
      <div class="card-header">{{'profile.card.security' | translate}}</div>
      <div class="card-body">
        <ds-profile-page-security-form
                [FORM_PREFIX]="'profile.security.form.'"
                (isInvalid)="setInvalid($event)"
                (passwordValue)="setPasswordValue($event)"
                (currentPasswordValue)="setCurrentPasswordValue($event)"
        ></ds-profile-page-security-form>
      </div>
    </div>
    <div class="col-12 text-right pr-0">
      <button class="btn btn-primary" (click)="updateProfile()"><i class="fas fa-edit"></i> {{'profile.form.submit' | translate}}</button>
    </div>

    <ng-container *ngIf="(groupsRD$ | async) as groupsRD;">
      <ng-container *ngTemplateOutlet="groupsRD?.isLoading ? loader : content"></ng-container>
      <ng-template #content>
        <ds-pagination *ngIf="groupsRD?.payload"
                       [hideGear]="true"
                       [hidePagerWhenSinglePage]="true"
                       [hidePaginationDetail]="true"
                       [paginationOptions]="optionsGroupsPagination"
                       [collectionSize]="groupsRD?.payload?.totalElements">
          <ng-container *ngIf="groupsRD?.payload?.page as groups">
            <div *ngIf="groups?.length > 0">
              <h2 class="mt-4">{{ 'profile.groups.head' | translate }}</h2>
              <ul class="list-group list-group-flush">
                <li *ngFor="let group of groups" class="list-group-item">{{ dsoNameService.getName(group) }}</li>
              </ul>
            </div>
          </ng-container>
        </ds-pagination>
      </ng-template>
      <ng-template #loader>
        <ds-loading [showMessage]="false"></ds-loading>
      </ng-template>
      <ds-error *ngIf="groupsRD?.hasFailed" message="{{ 'error.profile-groups' | translate }}"></ds-error>
    </ng-container>

    <ng-container *ngVar="(specialGroupsRD$ | async)?.payload?.page as specialGroups">
      <div *ngIf="specialGroups?.length > 0" data-test="specialGroups">
        <h2 class="mt-4">{{'profile.special.groups.head' | translate}}</h2>
        <ul class="list-group list-group-flush">
          <li *ngFor="let specialGroup of specialGroups" class="list-group-item">
            {{ dsoNameService.getName(specialGroup) }}
          </li>
        </ul>
     </div>
    </ng-container>
  </div>
</ng-container>
