<div>
  <div [id]="(mainComponent)?'tm-main':''" [class]="(mainComponent)?'uk-section tm-middle':''">
    <div *ngIf="loading" class="uk-flex uk-flex-center">
      <loading></loading>
    </div>
    <div *ngIf="!loading" class="uk-grid" uk-grid>
      <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
        <div *ngIf="!server" class="uk-container uk-container-small uk-position-relative">
          <div *ngIf="loggedIn && !errorCode" class="">
            <div class="uk-h2 uk-text-center">User Information</div>
            <div>
              <span class="uk-text-muted"> Full name </span> <span>   {{user.fullname}} </span>
            </div>
            <div>
              <span class="uk-text-muted"> E-mail </span> <span>   {{user.email}} </span>
            </div>
            <div *ngIf="user.role.length > 1">
              <span class="uk-text-muted"> Roles </span> <span>   {{getTheRolesFormatted(user.role)}} </span>
            </div>
            <div class="uk-margin-top" *ngIf="user.role.length > 1 && isPortalAdministrator">
              <a class="uk-button uk-button-primary" href="https://aai.openaire.eu/roles/index.php"
                 target="_blank">Manage your roles</a> {{" "}}
              <a class="uk-button uk-button-primary uk-margin-top"
                 href="https://aai.openaire.eu/roles/admin.php"
                 target="_blank">Manage role requests</a>{{" "}}
              <a class="uk-button uk-button-primary uk-margin-top"
                 href="https://aai.openaire.eu/registry"
                 target="_blank">Manage users</a>
            </div>


            <!-- <button (click)="logout()" class=" uk-button uk-button-default">Log out</button> -->
          </div>
          <div *ngIf="errorCode == '1' || (!loggedIn && errorCode != '3'  && errorCode != '6')" class="uk-alert uk-alert-warning">
            The requested page requires authentication.
            <span *ngIf="!loggedIn">Please  <a class="uk-link" (click)="logIn()"> sign in</a> to continue.
            </span>
          </div>
          <div *ngIf="errorCode == '2' || errorCode == '4' || errorCode == '8'" class="uk-alert uk-alert-warning">
            You are not authorized to use the requested page.
          </div>
          <div *ngIf="errorCode == '3'" class="uk-alert uk-alert-warning">
            The session has expired. Please <a class="" (click)="logIn()">sign in</a> again or continue <a class=""
                                                                                                           (click)="redirect();">browsing
            as a guest</a>.
          </div>
          <div *ngIf="errorCode == '5'" class="uk-alert uk-alert-warning">
            There is no research community selected.
          </div>
          <div *ngIf="!loggedIn && errorMessage.length > 0" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
        </div>
      </div>
    </div>
  </div>
</div>
