<app-header></app-header>

@if (concernedAuthor) {
  <div class="content">
    <div class="panel">
      <div class="user-infos">
        <div>
          <h2>{{ authorName }}</h2>
          <em>{{ concernedAuthor.role }}</em>
        </div>
        <div class="profile-picture">
          @if (concernedAuthor.profilePicture) {
            <p-avatar image="data:image/jpeg;base64,{{ concernedAuthor.profilePicture }}" shape="circle" styleClass="mr-2"
                      size="xlarge"></p-avatar>
          } @else {
            <p-avatar label="{{ authorName.charAt(0).toUpperCase() }}" styleClass="mr-2" size="xlarge"></p-avatar>
          }
        </div>
      </div>
      @if (actualAuthor) {
        @if (concernedAuthor.id === actualAuthor.id) {
          <p-button label="Mettre à jour les données du profil" (onClick)="updateProfileDialog=true"/>
          <p-dialog header='Mettre à jour le profil' [modal]="true" [(visible)]="updateProfileDialog">
            <app-update-profile (updatedAuthorEvent)="updateAuthor($event)" [authorId]="concernedAuthor.id"
                                [username]="concernedAuthor!.name"></app-update-profile>
          </p-dialog>
        }
      }
    </div>
  </div>
} @else {
  <app-loading></app-loading>
}
